fix: added support for onSearch action trigger in multiselect (#982)

Added support for onSearch action trigger in multiselect

Author: sagardspeed2

.changeset/fluffy-bananas-share.md

@@ -0,0 +1,6 @@
+---
+"@ensembleui/react-kitchen-sink": patch
+"@ensembleui/react-runtime": patch
+---
+
+Added onSearch support in multiselect

apps/kitchen-sink/src/ensemble/screens/home.yaml

@@ -10,6 +10,8 @@ View:
         ensemble.storage.set('bbb' , "0xffb91c1c")
         ensemble.storage.set('loading', true);
         console.log('>>> secret variable >>>', ensemble.secrets.dummyOauthSecret)
+        ensemble.storage.set('products', []);
+        ensemble.invokeAPI('getDummyProducts').then((res) => ensemble.storage.set('products', (res?.body?.users || []).map((i) => ({ ...i, name: i.firstName + ' ' + i.lastName }))));
         const res = await ensemble.invokeAPI('getDummyNumbers')
         await new Promise((resolve) => setTimeout(resolve, 5000))
         return res
@@ -452,6 +454,27 @@ View:
               <p id="tag2">Until recently, the prevailing view assumed lorem ipsum was born as a nonsense text. “It's not Latin, though it looks like it, and it actually says nothing,” Before & After magazine answered a curious reader, “Its ‘words’ loosely approximate the frequency with which letters occur in English, which is why at a glance it looks pretty real.”</p>
               </div>
 
+        - MultiSelect:
+            id: multiSelect
+            label: Search multiple from API or Storage
+            placeholder: "Search or Select From Groups"
+            labelKey: name
+            valueKey: email
+            data: ${ensemble.storage.get('products')}
+            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);
+            onChange:
+              executeCode: |
+                console.log("onChange values: ", search);
+
 Global:
   scriptName: test.js
 
@@ -490,3 +513,9 @@ API:
     uri: https://661e111b98427bbbef034208.mockapi.io/number?limit=10
     onResponse: |
       console.log('dummy number fetched')
+
+  getProducts:
+    method: GET
+    inputs:
+      - search
+    uri: "https://dummyjson.com/users/search?q=${search}"

packages/runtime/src/widgets/Form/MultiSelect.tsx

@@ -14,7 +14,8 @@ import {
 } from "@ensembleui/react-framework";
 import { PlusCircleOutlined } from "@ant-design/icons";
 import { Select as SelectComponent, Space, Form } from "antd";
-import { get, isArray, isEqual, isObject, isString } from "lodash-es";
+import { get, isArray, isEmpty, isEqual, isObject, isString } from "lodash-es";
+import { useDebounce } from "react-use";
 import { WidgetRegistry } from "../../registry";
 import { useEnsembleAction } from "../../runtime/hooks/useEnsembleAction";
 import type {
@@ -53,6 +54,9 @@ export type MultiSelectProps = {
   onChange?: EnsembleAction;
   /** OnItemSelect is deprecated. Please use onChange instead */
   onItemSelect?: EnsembleAction;
+  onSearch?: {
+    debounceMs: number;
+  } & EnsembleAction;
   hintStyle?: EnsembleWidgetStyles;
   allowCreateOptions?: boolean;
 } & EnsembleWidgetProps<MultiSelectStyles> &
@@ -63,9 +67,11 @@ const MultiSelect: React.FC<MultiSelectProps> = (props) => {
   const [options, setOptions] = useState<MultiSelectOption[]>([]);
   const [newOption, setNewOption] = useState("");
   const [selectedValues, setSelectedValues] = useState<MultiSelectOption[]>();
+  const [searchValue, setSearchValue] = useState<string | null>(null);
 
   const action = useEnsembleAction(props.onChange);
   const onItemSelectAction = useEnsembleAction(props.onItemSelect);
+  const onSearchAction = useEnsembleAction(props.onSearch);
 
   const { rawData } = useTemplateData({ data });
   const { id, rootRef, values } = useRegisterBindings(
@@ -146,6 +152,10 @@ const MultiSelect: React.FC<MultiSelectProps> = (props) => {
   }, [selectedValues, formInstance]);
 
   const handleSearch = (value: string): void => {
+    if (props.onSearch) {
+      setSearchValue(value);
+      return;
+    }
     const isOptionExist = options.find(
       (option) =>
         option.label.toString().toLowerCase().search(value.toLowerCase()) > -1,
@@ -158,6 +168,28 @@ const MultiSelect: React.FC<MultiSelectProps> = (props) => {
     }
   };
 
+  useDebounce(
+    () => {
+      if (onSearchAction?.callback && !isEmpty(searchValue)) {
+        onSearchAction.callback({ search: searchValue });
+      }
+    },
+    props?.onSearch?.debounceMs || 0,
+    [searchValue],
+  );
+
+  const handleFilterOption = (
+    input: string,
+    option?: MultiSelectOption,
+  ): boolean => {
+    return (
+      option?.label
+        .toString()
+        ?.toLowerCase()
+        ?.startsWith(input.toLowerCase()) || false
+    );
+  };
+
   // handle option change
   const handleChange = (
     value: MultiSelectOption[],
@@ -298,12 +330,7 @@ const MultiSelect: React.FC<MultiSelectProps> = (props) => {
             disabled={values?.enabled === false}
             dropdownRender={newOptionRender}
             dropdownStyle={values?.styles}
-            filterOption={(input, option): boolean =>
-              option?.label
-                .toString()
-                ?.toLowerCase()
-                ?.startsWith(input.toLowerCase()) || false
-            }
+            filterOption={props.onSearch ? false : handleFilterOption}
             id={values?.id}
             labelRender={labelRender}
             mode={values?.allowCreateOptions ? "tags" : "multiple"}

packages/runtime/src/widgets/Form/__tests__/MultiSelect.test.tsx

@@ -296,34 +296,20 @@ describe("MultiSelect Widget", () => {
     userEvent.click(screen.getByTitle("Option 4"));
     userEvent.click(screen.getByRole("combobox"));
 
+    const selector = ".ant-select-selection-item-content";
+
     // Wait for the combobox to reflect the selected values
     await waitFor(() => {
-      expect(
-        screen.getByText("Option 2", {
-          selector: ".ant-select-selection-item-content",
-        }),
-      ).toBeVisible();
-      expect(
-        screen.getByText("Option 4", {
-          selector: ".ant-select-selection-item-content",
-        }),
-      ).toBeVisible();
+      expect(screen.getByText("Option 2", { selector })).toBeVisible();
+      expect(screen.getByText("Option 4", { selector })).toBeVisible();
     });
 
     fireEvent.click(screen.getByText("change bindings"));
 
     // Wait for the combobox to reflect the selected values
     await waitFor(() => {
-      expect(
-        screen.getByText("Option 1", {
-          selector: ".ant-select-selection-item-content",
-        }),
-      ).toBeVisible();
-      expect(
-        screen.getByText("Option 3", {
-          selector: ".ant-select-selection-item-content",
-        }),
-      ).toBeVisible();
+      expect(screen.getByText("Option 1", { selector })).toBeVisible();
+      expect(screen.getByText("Option 3", { selector })).toBeVisible();
     });
   });
 
@@ -450,5 +436,107 @@ describe("MultiSelect Widget", () => {
       );
     });
   });
+
+  test("supports search in multiselect widget", async () => {
+    render(
+      <Form
+        children={[
+          {
+            name: "MultiSelect",
+            properties: {
+              id: "searchInput",
+              label: "Choose Option",
+              data: [
+                { label: "Option 1", value: "option1" },
+                { label: "Option 2", value: "option2" },
+                { label: "Option 3", value: "option3" },
+                { label: "Option 4", value: "option4" },
+              ],
+            },
+          },
+        ]}
+        id="form"
+      />,
+      { wrapper: FormTestWrapper },
+    );
+
+    const selector = ".ant-select-item-option-content";
+
+    userEvent.click(screen.getByRole("combobox"));
+    userEvent.type(document.querySelector("input") as HTMLElement, "Option 4");
+
+    // Wait for the combobox to reflect the selected values
+    await waitFor(() => {
+      expect(screen.getByText("Option 4", { selector })).toBeVisible();
+      expect(screen.queryByText("Option 1")).not.toBeInTheDocument();
+      expect(screen.queryByText("Option 2")).not.toBeInTheDocument();
+      expect(screen.queryByText("Option 3")).not.toBeInTheDocument();
+    });
+  });
+
+  test("supports on search action callback in multiselect widget", async () => {
+    render(
+      <Form
+        children={[
+          {
+            name: "MultiSelect",
+            properties: {
+              id: "searchInput",
+              label: "Choose Option",
+              data: `\${ensemble.storage.get('options')}`,
+              onSearch: {
+                executeCode: `
+                      const list = ensemble.storage.get('list') || [];
+                      const filtered = list.filter((option) => option?.label
+                        ?.toString()
+                        ?.toLowerCase()
+                        ?.startsWith(search.toLowerCase()));
+                      ensemble.storage.set('options', filtered)
+                      `,
+              },
+            },
+          },
+          {
+            name: "Button",
+            properties: {
+              label: "Set value",
+              onTap: {
+                executeCode: `
+                  const options = [
+                      { label: "Option 1", value: "option1" },
+                      { label: "Option 2", value: "option2" },
+                      { label: "Option 3", value: "option3" },
+                      { label: "Option 4", value: "option4" },
+                      { label: "Option 44", value: "option44" },
+                    ];
+                  ensemble.storage.set("options", options);
+                  ensemble.storage.set("list", options);
+              `,
+              },
+            },
+          },
+        ]}
+        id="form"
+      />,
+      { wrapper: FormTestWrapper },
+    );
+
+    const selector = ".ant-select-item-option-content";
+
+    const setValueButton = screen.getByText("Set value");
+    fireEvent.click(setValueButton);
+
+    userEvent.click(screen.getByRole("combobox"));
+    userEvent.type(document.querySelector("input") as HTMLElement, "Option 4");
+
+    // Wait for the combobox to reflect the selected values
+    await waitFor(() => {
+      expect(screen.getByText("Option 4", { selector })).toBeVisible();
+      expect(screen.queryByText("Option 1")).not.toBeInTheDocument();
+      expect(screen.queryByText("Option 2")).not.toBeInTheDocument();
+      expect(screen.queryByText("Option 3")).not.toBeInTheDocument();
+      expect(screen.queryByText("Option 44", { selector })).toBeVisible();
+    });
+  });
 });
 /* eslint-enable react/no-children-prop */