diff --git a/.changeset/four-apples-beg.md b/.changeset/four-apples-beg.md new file mode 100644 index 000000000..398cd338d --- /dev/null +++ b/.changeset/four-apples-beg.md @@ -0,0 +1,5 @@ +--- +"@ensembleui/react-runtime": patch +--- + +Allow reset options on clear search in multiselect and search diff --git a/apps/kitchen-sink/src/ensemble/screens/home.yaml b/apps/kitchen-sink/src/ensemble/screens/home.yaml index ecdd3abfb..1a71bdddf 100644 --- a/apps/kitchen-sink/src/ensemble/screens/home.yaml +++ b/apps/kitchen-sink/src/ensemble/screens/home.yaml @@ -460,17 +460,12 @@ View: placeholder: "Search or Select From Groups" labelKey: name valueKey: email - data: ${ensemble.storage.get('products')} + data: "${getProducts.body.users?.map((i) => ({ ...i, name: i.firstName + ' ' + i.lastName })) || []}" onSearch: - executeCode: | - ensemble.invokeAPI('getProducts', { search: search }).then((res) => { - const users = res?.body?.users || []; - console.log(users , "users"); - const newUsers = users.map((i) => ({ ...i, label: i.firstName + ' ' + i.lastName, name: i.firstName + ' ' + i.lastName, value: i.email })); - console.log(newUsers , "newUsers"); - ensemble.storage.set('products', newUsers); - }); - console.log("onSearch values: ", search); + invokeAPI: + name: getProducts + inputs: + search: ${search} onChange: executeCode: | console.log("onChange values: ", search); diff --git a/packages/runtime/src/widgets/Form/MultiSelect.tsx b/packages/runtime/src/widgets/Form/MultiSelect.tsx index b65fba381..772d80959 100644 --- a/packages/runtime/src/widgets/Form/MultiSelect.tsx +++ b/packages/runtime/src/widgets/Form/MultiSelect.tsx @@ -14,7 +14,7 @@ import { } from "@ensembleui/react-framework"; import { PlusCircleOutlined } from "@ant-design/icons"; import { Select as SelectComponent, Space, Form } from "antd"; -import { get, isArray, isEmpty, isEqual, isObject, isString } from "lodash-es"; +import { get, isArray, isEqual, isObject, isString } from "lodash-es"; import { useDebounce } from "react-use"; import { WidgetRegistry } from "../../registry"; import { useEnsembleAction } from "../../runtime/hooks/useEnsembleAction"; @@ -170,7 +170,7 @@ const MultiSelect: React.FC = (props) => { useDebounce( () => { - if (onSearchAction?.callback && !isEmpty(searchValue)) { + if (onSearchAction?.callback) { onSearchAction.callback({ search: searchValue }); } }, diff --git a/packages/runtime/src/widgets/Form/__tests__/MultiSelect.test.tsx b/packages/runtime/src/widgets/Form/__tests__/MultiSelect.test.tsx index f80634a4b..2ed6353a5 100644 --- a/packages/runtime/src/widgets/Form/__tests__/MultiSelect.test.tsx +++ b/packages/runtime/src/widgets/Form/__tests__/MultiSelect.test.tsx @@ -537,6 +537,18 @@ describe("MultiSelect Widget", () => { expect(screen.queryByText("Option 3")).not.toBeInTheDocument(); expect(screen.queryByText("Option 44", { selector })).toBeVisible(); }); + + // clear search value to show all options + userEvent.clear(document.querySelector("input") as HTMLElement); + + // Wait for the combobox to reflect the selected values + await waitFor(() => { + expect(screen.getByText("Option 4", { selector })).toBeVisible(); + expect(screen.queryByText("Option 1", { selector })).toBeVisible(); + expect(screen.queryByText("Option 2", { selector })).toBeVisible(); + expect(screen.queryByText("Option 3", { selector })).toBeVisible(); + expect(screen.queryByText("Option 44", { selector })).toBeVisible(); + }); }); }); /* eslint-enable react/no-children-prop */