fix: allow reset options on clear search

.changeset/four-apples-beg.md

@@ -0,0 +1,5 @@
+---
+"@ensembleui/react-runtime": patch
+---
+
+Allow reset options on clear search in multiselect and search

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);

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<MultiSelectProps> = (props) => {
 
   useDebounce(
     () => {
-      if (onSearchAction?.callback && !isEmpty(searchValue)) {
+      if (onSearchAction?.callback) {
         onSearchAction.callback({ search: searchValue });
       }
     },

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 */