fix(select): check state with disabled option

src/components/select/bl-select.css

@@ -348,6 +348,7 @@ legend span {
   padding: var(--bl-size-xs) 0;
   background: var(--background-color);
   z-index: 1;
+  font: var(--bl-font-title-3-regular);
 
   /* Make sure option focus doesn't overflow */
   box-shadow: 10px 0 0 var(--background-color), -10px 0 0 var(--background-color);

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

@@ -3,6 +3,7 @@ import { sendKeys } from "@web/test-runner-commands";
 import BlSelect from "./bl-select";
 import BlButton from "../button/bl-button";
 import BlCheckbox from "../checkbox-group/checkbox/bl-checkbox";
+import "../checkbox-group/checkbox/bl-checkbox";
 import type BlSelectOption from "./option/bl-select-option";
 
 describe("bl-select", () => {
@@ -595,5 +596,33 @@ describe("bl-select", () => {
       expect(selectAll.indeterminate).to.be.true;
       expect(selectAll.checked).to.be.false;
     });
+
+    it('should uncheck "select all" checkbox when all available options are selected', async () => {
+      const el = await fixture<BlSelect>(html`<bl-select multiple>
+        <bl-select-option value="1" disabled>Option 1</bl-select-option>
+        <bl-select-option value="2" selected>Option 2</bl-select-option>
+        <bl-select-option value="3" selected>Option 3</bl-select-option>
+        <bl-select-option value="4" selected>Option 4</bl-select-option>
+        <bl-select-option value="5" selected>Option 5</bl-select-option>
+      </bl-select>`);
+
+      const selectAll = el.shadowRoot!.querySelector<BlCheckbox>(".select-all")!;
+
+      expect(selectAll.indeterminate).to.be.true;
+      expect(selectAll.checked).to.be.false;
+
+      setTimeout(() => selectAll.dispatchEvent(
+        new CustomEvent("bl-checkbox-change", { detail: true }))
+      );
+
+      const event = await oneEvent(el, "bl-select");
+
+      expect(event).to.exist;
+      expect(event.detail.length).to.equal(0);
+      expect(el.selectedOptions.length).to.equal(0);
+
+      expect(selectAll.indeterminate).to.be.false;
+      expect(selectAll.checked).to.be.false;
+    });
    });
 });

src/components/select/bl-select.ts

@@ -7,6 +7,7 @@ import { FormControlMixin, requiredValidator } from "@open-wc/form-control";
 import { FormValue } from "@open-wc/form-helpers";
 import "element-internals-polyfill";
 import { event, EventDispatcher } from "../../utilities/event";
+import BlCheckbox from "../checkbox-group/checkbox/bl-checkbox";
 import "../icon/bl-icon";
 import style from "../select/bl-select.css";
 import "../select/option/bl-select-option";
@@ -289,20 +290,6 @@ export default class BlSelect<ValueType extends FormValue = string> extends Form
     });
   }
 
-  private _handleSelectAll(e: CustomEvent) {
-    const checked = e.detail;
-
-    this._connectedOptions.forEach(option => {
-      if (option.disabled) {
-        return;
-      }
-
-      option.selected = checked;
-    });
-
-    this._handleMultipleSelect();
-  }
-
   connectedCallback(): void {
     super.connectedCallback();
 
@@ -490,6 +477,34 @@ export default class BlSelect<ValueType extends FormValue = string> extends Form
     }
   }
 
+  private _handleSelectAll(e: CustomEvent) {
+    const checked = e.detail;
+    const isAllSelectedOrDisabled = this._connectedOptions.every(
+      option => option.disabled || option.selected
+    );
+
+    // Prevent checkbox to be checked when unselected disabled options are present and all remaining are selected
+    if (checked && isAllSelectedOrDisabled) {
+      setTimeout(() => {
+        const selectAll = this.shadowRoot?.querySelector(".select-all") as BlCheckbox;
+        const checkbox = selectAll?.shadowRoot?.querySelector("input");
+
+        checkbox?.click();
+      }, 0);
+      return;
+    }
+
+    this._connectedOptions.forEach(option => {
+      if (option.disabled) {
+        return;
+      }
+
+      option.selected = checked;
+    });
+
+    this._handleMultipleSelect();
+  }
+
   private _onClickRemove(e: MouseEvent) {
     e.stopPropagation();