Merge branch 'main' into cou-title-actions-styles

caritaou · Aug 21, 2024 · 4e15205 · 4e15205
2 parents a24ded4 + d73fff1
commit 4e15205
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 1 deletion.
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
@@ -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(
+			<OneofselectControl
+				store={controller.getStore()}
+				control={control}
+				controller={controller}
+				propertyId={propertyId}
+			/>
+		);
+		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
@@ -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 {