fix(web-components): update search bar to correctly show no results f…

…ound Update search bar to correctly show no results found state when external filtering is used but not loading. Added story to show this. . #849
mi6 · Jul 21, 2023 · 9114f47 · 9114f47
1 parent 7d85eed
commit 9114f47
Show file tree

Hide file tree

Showing 2 changed files with 72 additions and 0 deletions.
diff --git a/packages/web-components/src/components/ic-search-bar/ic-search-bar.stories.mdx b/packages/web-components/src/components/ic-search-bar/ic-search-bar.stories.mdx
@@ -212,6 +212,76 @@ import readme from "./readme.md";
 
 <Canvas>
   <Story name="External filtering" parameters={{ loki: { skip: true } }}>
+    {(args) =>
+      html` <ic-search-bar
+          label="Search for coffee"
+          placeholder="Type to search"
+          debounce="300"
+          disable-filter="true"
+          id="external-filter-search"
+        ></ic-search-bar>
+        <br />
+        <ic-typography
+          >Suggested search options: Espresso, Double Espresso, Flat White,
+          Cappuccino, Americano, Mocha</ic-typography
+        >
+        <br />
+        <ic-typography
+          >The IcChange event will trigger 300ms after you finish
+          typing.</ic-typography
+        >
+        <script>
+          var mockData = [
+            { label: "Espresso", value: "espresso" },
+            { label: "Double Espresso", value: "doubleespresso" },
+            { label: "Flat White", value: "flatwhite" },
+            { label: "Cappuccino", value: "cappucino" },
+            { label: "Americano", value: "americano" },
+            { label: "Mocha", value: "mocha" },
+          ];
+          var select = document.querySelector("#external-filter-search");
+          var optionSelected = false;
+          function handleFilter(event) {
+            query = event.detail.value;
+            if (query !== optionSelected) {
+              if (query.length > 1) {
+                optionSelected = false;
+                mockAPI = (query) => {
+                  filteredResults = mockData.filter((m) =>
+                    m.label.toLowerCase().includes(query.toLowerCase())
+                  );
+                  return new Promise((resolve) =>
+                    setTimeout(
+                      () => resolve(filteredResults),
+                      event.type === "icChange" ? 2000 : 1000
+                    )
+                  );
+                };
+                mockAPI(query).then((results) => (select.options = results));
+              } else {
+                select.options = [];
+              }
+            }
+            optionSelected = "";
+          }
+          function handleSelect(event) {
+            optionSelected = true;
+          }
+          select.addEventListener("icOptionSelect", handleSelect);
+          select.addEventListener("icChange", handleFilter);
+          select.addEventListener("icRetryLoad", handleFilter);
+        </script>`
+    }
+  </Story>
+</Canvas>
+
+### External filtering with loading
+
+<Canvas>
+  <Story
+    name="External filtering with loading"
+    parameters={{ loki: { skip: true } }}
+  >
     {(args) =>
       html` <ic-search-bar
           label="Search for coffee"

diff --git a/packages/web-components/src/components/ic-search-bar/ic-search-bar.tsx b/packages/web-components/src/components/ic-search-bar/ic-search-bar.tsx
@@ -312,6 +312,8 @@ export class SearchBar {
     if (this.options.length > 0) {
       this.setMenuChange(true);
 
+      this.preLoad = false;
+
       if (this.disableFilter === false) {
         const rawFilteredOptions = getFilteredMenuOptions(
           this.options,