From a7eedc692d645208adfd43691af4e82c2c5363b8 Mon Sep 17 00:00:00 2001 From: sagar davara Date: Thu, 16 Jan 2025 12:20:51 +0530 Subject: [PATCH 1/3] fix: allow reset options on clear search --- .changeset/four-apples-beg.md | 5 +++++ packages/runtime/src/widgets/Form/MultiSelect.tsx | 4 ++-- packages/runtime/src/widgets/Search.tsx | 2 +- 3 files changed, 8 insertions(+), 3 deletions(-) create mode 100644 .changeset/four-apples-beg.md 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/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/Search.tsx b/packages/runtime/src/widgets/Search.tsx index 3b349f752..fa28042b2 100644 --- a/packages/runtime/src/widgets/Search.tsx +++ b/packages/runtime/src/widgets/Search.tsx @@ -119,7 +119,7 @@ export const Search: React.FC = ({ useDebounce( () => { - if (onSearchAction?.callback && !isEmpty(searchValue)) { + if (onSearchAction?.callback) { onSearchAction.callback({ search: searchValue }); } }, From e5eaebfe205a43e609f43dacd180648424d0a097 Mon Sep 17 00:00:00 2001 From: sagar davara Date: Thu, 16 Jan 2025 12:27:24 +0530 Subject: [PATCH 2/3] fix: update YAML --- apps/kitchen-sink/src/ensemble/screens/home.yaml | 15 +++++---------- 1 file changed, 5 insertions(+), 10 deletions(-) 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); From 2bef4c4d04091895484fe696f85baaf81e6add37 Mon Sep 17 00:00:00 2001 From: Sagar Davara Date: Fri, 17 Jan 2025 20:10:24 +0530 Subject: [PATCH 3/3] fix: add test case for search clear --- .../src/widgets/Form/__tests__/MultiSelect.test.tsx | 12 ++++++++++++ packages/runtime/src/widgets/Search.tsx | 2 +- 2 files changed, 13 insertions(+), 1 deletion(-) 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 */ diff --git a/packages/runtime/src/widgets/Search.tsx b/packages/runtime/src/widgets/Search.tsx index fa28042b2..3b349f752 100644 --- a/packages/runtime/src/widgets/Search.tsx +++ b/packages/runtime/src/widgets/Search.tsx @@ -119,7 +119,7 @@ export const Search: React.FC = ({ useDebounce( () => { - if (onSearchAction?.callback) { + if (onSearchAction?.callback && !isEmpty(searchValue)) { onSearchAction.callback({ search: searchValue }); } },