diff --git a/canvas_modules/common-canvas/__tests__/common-properties/controls/oneofselect-test.js b/canvas_modules/common-canvas/__tests__/common-properties/controls/oneofselect-test.js index cb80332d0e..f2b830f371 100644 --- a/canvas_modules/common-canvas/__tests__/common-properties/controls/oneofselect-test.js +++ b/canvas_modules/common-canvas/__tests__/common-properties/controls/oneofselect-test.js @@ -521,11 +521,29 @@ describe("oneofselect with custom value allowed works correctly", () => { ); let dropdownWrapper = wrapper.find("div[data-id='properties-oneofselect-custom']"); const dropdownInput = dropdownWrapper.find("input"); - dropdownInput.simulate("click"); + // Enter '' in input to check [one, three] are filtered using enumFilter and shouldFilterItem + dropdownInput.simulate("change", { target: { value: "" } }); dropdownWrapper = wrapper.find("div[data-id='properties-oneofselect-custom']"); const dropdownList = dropdownWrapper.find("li.cds--list-box__menu-item"); expect(dropdownList).to.be.length(2); }); + + it("Validate oneofselect filters correctly using shouldFilterItem", () => { + const wrapper = mount( + + ); + let dropdownWrapper = wrapper.find("div[data-id='properties-oneofselect-custom']"); + const dropdownInput = dropdownWrapper.find("input"); + dropdownInput.simulate("change", { target: { value: "one" } }); + dropdownWrapper = wrapper.find("div[data-id='properties-oneofselect-custom']"); + const dropdownList = dropdownWrapper.find("li.cds--list-box__menu-item"); + expect(dropdownList).to.be.length(1); + }); }); describe("oneofselect classnames appear correctly", () => { diff --git a/canvas_modules/common-canvas/src/common-properties/controls/dropdown/dropdown.jsx b/canvas_modules/common-canvas/src/common-properties/controls/dropdown/dropdown.jsx index 944705543c..396b510040 100644 --- a/canvas_modules/common-canvas/src/common-properties/controls/dropdown/dropdown.jsx +++ b/canvas_modules/common-canvas/src/common-properties/controls/dropdown/dropdown.jsx @@ -191,6 +191,11 @@ class DropDown extends React.Component { } } + // Filter Oneofselect items as per entered input. + filterItems(list) { + return list?.item?.label?.toLowerCase().includes(list?.inputValue?.toLowerCase()); + } + render() { let dropDown; if (this.props.control.controlType === ControlType.SELECTSCHEMA) { @@ -249,6 +254,7 @@ class DropDown extends React.Component { translateWithId={(id) => listBoxMenuIconTranslationIds[id]} titleText={this.props.controlItem} helperText={this.props.control.helperText} + shouldFilterItem={this.filterItems} /> ); } else {