feat(select): add search feature for select

src/components/select/bl-select.css

@@ -103,15 +103,6 @@
   display: none;
 }
 
-.remove-all::after {
-  content: "";
-  position: absolute;
-  left: 1.5rem;
-  bottom: 4px;
-  height: 1rem;
-  border-left: 1px solid var(--bl-color-neutral-lighter);
-}
-
 .selected .remove-all {
   display: block;
 }
@@ -193,7 +184,7 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  gap: var(--bl-size-2xs);
+  gap: var(--bl-size-4xs);
   margin-left: var(--bl-size-2xs);
 }
 
@@ -219,6 +210,15 @@
   left: var(--left);
 }
 
+.popover-no-result {
+  display: flex;
+  flex-direction: column;
+  gap: var(--bl-size-2xs);
+  align-items: center;
+  justify-content: center;
+  height: 80px;
+}
+
 .select-open .popover {
   display: flex;
   border: solid 1px var(--border-focus-color);
@@ -361,3 +361,54 @@ legend span {
   bottom: 0;
   border-bottom: 1px solid var(--bl-color-neutral-lighter);
 }
+
+.search-bar-input {
+  font: var(--bl-font-title-3-regular);
+  font-size: var(--font-size);
+  color: var(--text-color);
+  border: none;
+  outline: none;
+  background-color: transparent;
+  width: 100%;
+  height: 100%;
+  padding: 0;
+  margin: 0;
+  box-sizing: border-box;
+}
+
+.search-bar-input::placeholder {
+  color: var(--placeholder-color);
+}
+
+.search-bar-input:focus-visible {
+  outline: none;
+}
+
+.search-loading-icon {
+  animation: spin 1s linear infinite;
+}
+
+.action-divider {
+  display: none;
+}
+
+.select-wrapper .action-divider {
+  display: block;
+  height: 1rem;
+  width: 1px;
+  background-color: var(--bl-color-neutral-lighter);
+}
+
+@keyframes spin {
+  from {
+    transform: rotate(0deg);
+  }
+
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+.actions bl-icon {
+  padding: 4px;
+}

src/components/select/bl-select.stories.mdx

@@ -100,6 +100,9 @@ export const SelectTemplate = (args) => html`<bl-select
     ?success=${args.success}
     ?view-select-all=${args.viewSelectAll}
     select-all-text=${ifDefined(args.selectAllText)}
+    ?search-bar=${args.searchBar}
+    ?search-bar-loading-state=${args.searchBarLoadingState}
+    search-bar-placeholder=${ifDefined(args.searchBarPlaceholder)}
     size=${ifDefined(args.size)}
     help-text=${ifDefined(args.helpText)}
     invalid-text=${ifDefined(args.customInvalidText)}
@@ -249,6 +252,28 @@ Select component can be disabled by using `disabled` attribute.
   </Story>
 </Canvas>
 
+## Searchable
+
+<bl-badge icon="document">[ADR](https://github.com/Trendyol/baklava/issues/265#issuecomment-1845414216)</bl-badge>
+
+Select component can be searchable by using `search-bar` attribute.
+
+Display a loading icon in place of the search icon with using `search-bar-loading-state` attribute, seamlessly integrating it with your API endpoint to provide a smooth user experience during data retrieval.
+
+<Canvas>
+  <Story name="Searchable" args={{ searchBar: true, searchBarPlaceholder: 'Search your options' }}>
+    {SelectTemplate.bind({})}
+  </Story>
+
+  <Story name="Searchable with Multiple Option" args={{ searchBar: true,  searchBarPlaceholder: 'Search your options', multiple: true, viewSelectAll: true }}>
+    {SelectTemplate.bind({})}
+  </Story>
+
+  <Story name="Searchable with Loading State" args={{ searchBar: true, searchBarPlaceholder: 'Search your options', multiple: true, searchBarLoadingState: true }}>
+    {SelectTemplate.bind({})}
+  </Story>
+</Canvas>
+
 ## `bl-select` Event
 
 Select component fires `bl-select` event once selection changes. This event has a payload in the type of

src/components/select/bl-select.test.ts

@@ -280,6 +280,119 @@ describe("bl-select", () => {
     expect(selectOption).is.not.exist;
   });
 
+  it("should show search input if search-bar attribute is given", async () => {
+    const el = await fixture<BlSelect>(html`<bl-select search-bar>
+      <bl-select-option value="tr">Turkey</bl-select-option>
+      <bl-select-option value="en">United States of America</bl-select-option>
+    </bl-select>`);
+
+    const searchInput = el.shadowRoot?.querySelector<HTMLInputElement>("fieldset input");
+
+    expect(searchInput).to.exist;
+  });
+
+  it("should search 'Turkey' when 'turkey' is typed", async () => {
+    const el = await fixture<BlSelect>(html`<bl-select search-bar>
+      <bl-select-option value="tr">Turkey</bl-select-option>
+      <bl-select-option value="en">United States of America</bl-select-option>
+    </bl-select>`);
+
+    const searchInput = el.shadowRoot?.querySelector<HTMLInputElement>("fieldset input");
+
+    searchInput?.focus();
+
+    await sendKeys({
+      type: "turkey",
+    });
+
+    el.options.forEach(option => {
+      if (option.innerText === "Turkey") {
+        expect(option.hidden).to.be.false;
+      } else {
+        expect(option.hidden).to.be.true;
+      }
+    });
+  });
+
+  it("should show loading icon when the search loading state is true", async () => {
+    const el = await fixture<BlSelect>(html`<bl-select search-bar>
+      <bl-select-option value="tr">Turkey</bl-select-option>
+      <bl-select-option value="en">United States of America</bl-select-option>
+    </bl-select>`);
+
+    const searchInput = el.shadowRoot?.querySelector<HTMLInputElement>("fieldset input");
+
+    searchInput?.focus();
+
+    const loadingIcon = el.shadowRoot?.querySelector<HTMLInputElement>("fieldset bl-icon");
+
+    await sendKeys({
+      type: "turkey",
+    });
+
+    expect(loadingIcon).to.exist;
+  });
+
+  it("should be displayed a 'no result' message  if the searched term does not match with any option", async () => {
+    const el = await fixture<BlSelect>(html`<bl-select search-bar>
+      <bl-select-option value="tr">Turkey</bl-select-option>
+      <bl-select-option value="en">United States of America</bl-select-option>
+    </bl-select>`);
+
+    const searchInput = el.shadowRoot?.querySelector<HTMLInputElement>("fieldset input");
+
+    searchInput?.focus();
+
+    await sendKeys({
+      type: "netherlands",
+    });
+
+    const noResultContainer = el.shadowRoot?.querySelector<HTMLInputElement>(".popover .popover-no-result");
+    const noResultMessage = el.shadowRoot?.querySelector<HTMLInputElement>(".popover .popover-no-result span")?.innerText;
+
+
+    el.options.forEach(option => {
+      expect(option.hidden).to.be.true;
+    });
+
+    expect(noResultContainer).to.exist;
+    expect(noResultMessage).to.equal("No Data Found");
+  });
+
+  it("should be cleared the search input if the user click on the clear search button", async () => {
+    const el = await fixture<BlSelect>(html`<bl-select search-bar>
+      <bl-select-option value="tr">Turkey</bl-select-option>
+      <bl-select-option value="en">United States of America</bl-select-option>
+    </bl-select>`);
+
+    const searchInput = el.shadowRoot?.querySelector<HTMLInputElement>("fieldset input");
+
+    searchInput?.focus();
+
+    await sendKeys({
+      type: "netherlands",
+    });
+
+    const clearSearchButton = el.shadowRoot?.querySelector<BlButton>(".popover .popover-no-result bl-button");
+
+    clearSearchButton?.click();
+
+    setTimeout(() => expect(searchInput?.value).to.equal(""));
+  });
+
+  it("should focus if one or more option selected already", async () => {
+    const el = await fixture<BlSelect>(html`<bl-select search-bar>
+      <bl-select-option value="tr">Turkey</bl-select-option>
+      <bl-select-option value="en">United States of America</bl-select-option>
+    </bl-select>`);
+
+    const dropdownIcon = el.shadowRoot?.querySelector<HTMLDivElement>(".dropdown-icon");
+
+    dropdownIcon?.click();
+
+    await(()=> expect(document.activeElement).to.equal(el));
+  });
+
   describe("additional selection counter", () => {
     let el: BlSelect;
 
@@ -649,5 +762,29 @@ describe("bl-select", () => {
       expect(selectAll.indeterminate).to.be.false;
       expect(selectAll.checked).to.be.false;
     });
-   });
+  });
+
+  describe("events", () => {
+    it("should fire search event when 'turkey' is typed", async () => {
+        const el = await fixture<BlSelect>(html`<bl-select search-bar>
+      <bl-select-option value="tr">Turkey</bl-select-option>
+      <bl-select-option value="en">United States of America</bl-select-option>
+    </bl-select>`);
+
+      const searchInput = el.shadowRoot?.querySelector<HTMLInputElement>("fieldset input");
+
+      if (searchInput) {
+        searchInput.focus();
+
+        searchInput.value = "turkey";
+      }
+
+      setTimeout(() => searchInput?.dispatchEvent(new Event("input")));
+
+      const event = await oneEvent(el, "bl-search");
+
+      expect(event).to.exist;
+      expect(event.detail).to.equal("turkey");
+    });
+  });
 });