feat(select): select works on filtered results now

Trendyol · Dec 28, 2023 · 3fd66b5 · 3fd66b5
1 parent ee495e8
commit 3fd66b5
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 16 deletions.
diff --git a/src/components/select/bl-select.stories.mdx b/src/components/select/bl-select.stories.mdx
@@ -195,6 +195,14 @@ The Select component features a 'Select All' option in the Multiple Select, whic
   </Story>
 </Canvas>
 
+Select all is designed to operate on filtered results as well, selecting only those options that meet the filter.
+
+<Canvas>
+  <Story name="Searchable with Select All" args={{ searchBar: true, searchBarPlaceholder: 'Search your options', multiple: true, viewSelectAll: true }}>
+    {SelectTemplate.bind({})}
+  </Story>
+</Canvas>
+
 ## Clear Button
 
 The select component includes a clear button. Clear button can be displayed by passing `clearable` attribute to the Select component.

diff --git a/src/components/select/bl-select.ts b/src/components/select/bl-select.ts
@@ -259,10 +259,6 @@ export default class BlSelect<ValueType extends FormValue = string> extends Form
     return this._additionalSelectedOptionCount;
   }
 
-  get isAllSelected() {
-    return this._selectedOptions.length === this._connectedOptions.length;
-  }
-
   validityCallback(): string | void {
     if (this.customInvalidText) {
       return this.customInvalidText;
@@ -469,14 +465,17 @@ export default class BlSelect<ValueType extends FormValue = string> extends Form
       return null;
     }
 
-    const isAnySelected = this._selectedOptions.length > 0;
+    const isAllRenderedOptionsSelected = this._connectedOptions
+      .filter(option => !option.hidden)
+      .every(option => option.selected);
+    const isAnySelected = this._selectedOptions.filter(option => !option.hidden).length > 0;
 
     return html`<bl-checkbox
       class="select-all"
-      .checked="${this.isAllSelected}"
-      .indeterminate="${isAnySelected && !this.isAllSelected}"
+      .checked="${isAllRenderedOptionsSelected}"
+      .indeterminate="${isAnySelected && !isAllRenderedOptionsSelected}"
       role="option"
-      aria-selected="${this.isAllSelected}"
+      aria-selected="${isAllRenderedOptionsSelected}"
       @bl-checkbox-change="${this._handleSelectAll}"
     >
       ${this.selectAllText}
@@ -648,7 +647,9 @@ export default class BlSelect<ValueType extends FormValue = string> extends Form
     const selectAllEl = this.shadowRoot?.querySelector(".select-all") as BlCheckbox;
 
     const checked = e.detail;
-    const unselectedOptions = this._connectedOptions.filter(option => !option.selected);
+    const unselectedOptions = this._connectedOptions.filter(
+      option => !option.selected && !option.hidden
+    );
     const isAllUnselectedDisabled = unselectedOptions.every(option => option.disabled);
 
     // If all available options are selected, instead of checking, uncheck all options
@@ -662,20 +663,14 @@ export default class BlSelect<ValueType extends FormValue = string> extends Form
     }
 
     this._connectedOptions.forEach(option => {
-      if (option.disabled) {
+      if (option.disabled || option.hidden) {
         return;
       }
 
       option.selected = checked;
     });
 
     this._handleMultipleSelect();
-
-    // Make sure the checkbox state is in sync with selected options
-    setTimeout(() => {
-      selectAllEl.checked = this.isAllSelected;
-      selectAllEl.indeterminate = this._selectedOptions.length > 0 && !this.isAllSelected;
-    });
   }
 
   private _onClickRemove(e: MouseEvent) {