fix(select): shouln't hide label on searchable (#829)

It was always displaying search placeholder. Added new stories to the select component in the storybook with label and fixed label options. Fixes #828
Trendyol · Apr 17, 2024 · d8137c9 · d8137c9
1 parent 7d59dbd
commit d8137c9
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 1 deletion.
diff --git a/src/components/select/bl-select.stories.mdx b/src/components/select/bl-select.stories.mdx
@@ -294,6 +294,14 @@ Display a loading icon in place of the search icon with using `search-bar-loadin
   <Story name="Searchable with Loading State" args={{ searchBar: true, searchBarPlaceholder: 'Search your options', multiple: true, searchBarLoadingState: true }}>
     {SelectTemplate.bind({})}
   </Story>
+
+  <Story name="Searchable with Label" args={{ searchBar: true, searchBarPlaceholder: 'Search your options', label: 'Label' }}>
+    {SelectTemplate.bind({})}
+  </Story>
+
+  <Story name="Searchable with Fixed Label" args={{ searchBar: true, searchBarPlaceholder: 'Search your options', label: 'Label', labelFixed: true }}>
+    {SelectTemplate.bind({})}
+  </Story>
 </Canvas>
 
 ## Special Use Cases

diff --git a/src/components/select/bl-select.ts b/src/components/select/bl-select.ts
@@ -428,7 +428,9 @@ export default class BlSelect<ValueType extends FormValue = string> extends Form
         : html`
             <input
               class="search-bar-input"
-              placeholder=${searchbarPlaceholderText}
+              placeholder=${this.opened || this.labelFixed
+                ? searchbarPlaceholderText
+                : this.label || searchbarPlaceholderText}
               @input=${this._handleSearchOptions}
               .value=${this._searchText}
             />