From 22f71c743df6e09955a79982e5129eb29809faa7 Mon Sep 17 00:00:00 2001
From: Erbil Nas <erbil.nas@trendyol.com>
Date: Thu, 8 Feb 2024 16:55:05 +0300
Subject: [PATCH 1/3] fix(select): fix disabled select can be open using
 keydowns

---
 src/components/select/bl-select.test.ts | 19 +++++++++++++++++++
 src/components/select/bl-select.ts      | 21 ++++++++++++++++-----
 2 files changed, 35 insertions(+), 5 deletions(-)

diff --git a/src/components/select/bl-select.test.ts b/src/components/select/bl-select.test.ts
index 01cfa2ff..c16ca5e3 100644
--- a/src/components/select/bl-select.test.ts
+++ b/src/components/select/bl-select.test.ts
@@ -596,6 +596,25 @@ describe("bl-select", () => {
       expect(document.activeElement).to.not.equal(blSelect);
     });
 
+
+    it("should not open popover if it is disabled", async () => {
+      // if it is disabled, it should not open popover and return from function
+      blSelect.disabled = true;
+
+      // given
+
+      await sendKeys({
+        press: tabKey,
+      });
+
+      await sendKeys({
+        press: "Space",
+      });
+
+      // then
+      expect(blSelect.opened).to.equal(false);
+    });
+
     ["Space", "Enter", "ArrowDown", "ArrowUp"].forEach(keyCode => {
       it(`should open popover with ${keyCode} key`, async () => {
         //given
diff --git a/src/components/select/bl-select.ts b/src/components/select/bl-select.ts
index a28b88d3..bd74eeef 100644
--- a/src/components/select/bl-select.ts
+++ b/src/components/select/bl-select.ts
@@ -150,7 +150,7 @@ export default class BlSelect<ValueType extends FormValue = string> extends Form
   /**
    * Views select all option in multiple select
    */
-  @property({ type: Boolean, attribute: "view-select-all" })
+  @property({ type: Boolean, attribute: "view-select-all", converter: stringBooleanConverter() })
   viewSelectAll = false;
 
   /**
@@ -434,12 +434,15 @@ export default class BlSelect<ValueType extends FormValue = string> extends Form
           >`
         : ""}
 
-      <div class="actions" @click=${this._togglePopover}>
+      <div class="actions">
         ${this.opened ? (this.searchBarLoadingState ? searchLoadingIcon : searchMagIcon) : ""}
         ${!this.opened ? removeButton : ""} ${actionDivider}
-        <bl-icon class="dropdown-icon open" name="arrow_up"></bl-icon>
 
-        <bl-icon class="dropdown-icon closed" name="arrow_down"></bl-icon>
+        <div @click=${this._togglePopover}>
+          <bl-icon class="dropdown-icon open" name="arrow_up"></bl-icon>
+
+          <bl-icon class="dropdown-icon closed" name="arrow_down"></bl-icon>
+        </div>
       </div>
     </fieldset>`;
 
@@ -548,7 +551,15 @@ export default class BlSelect<ValueType extends FormValue = string> extends Form
   private focusedOptionIndex = -1;
 
   private handleKeydown(event: KeyboardEvent) {
-    if (this.focusedOptionIndex === -1 && ["Enter", "Space"].includes(event.code)) {
+    if (
+      this.focusedOptionIndex === -1 &&
+      !this.searchBar &&
+      !this.disabled &&
+      ["Space"].includes(event.code)
+    ) {
+      this._togglePopover();
+      event.preventDefault();
+    } else if (["Enter"].includes(event.code) && !this.disabled) {
       this._togglePopover();
       event.preventDefault();
     } else if (this._isPopoverOpen === false && ["ArrowDown", "ArrowUp"].includes(event.code)) {

From 0eba2aab67e697862610d80c54800bf3bd827a86 Mon Sep 17 00:00:00 2001
From: Erbil Nas <erbil.nas@trendyol.com>
Date: Thu, 8 Feb 2024 17:20:53 +0300
Subject: [PATCH 2/3] fix(select): change item count color if select is
 disabled

---
 src/components/select/bl-select.css | 8 ++++++++
 1 file changed, 8 insertions(+)

diff --git a/src/components/select/bl-select.css b/src/components/select/bl-select.css
index 2e77a12d..efc011b4 100644
--- a/src/components/select/bl-select.css
+++ b/src/components/select/bl-select.css
@@ -162,6 +162,10 @@
   text-overflow: ellipsis;
 }
 
+:host([disabled]) .select-input .selected-options {
+  color: var(--bl-color-neutral-light);
+}
+
 .selected-options li {
   display: inline;
   font-size: var(--font-size);
@@ -176,6 +180,10 @@
   display: none;
 }
 
+:host([disabled]) .additional-selection-count {
+  color: var(--bl-color-neutral-light);
+}
+
 :host([disabled]) .selected-options li {
   color: var(--bl-color-neutral-light);
 }

From 662df8a282a2cca65c7c7bbfb61a0b8ce29b188c Mon Sep 17 00:00:00 2001
From: Erbil Nas <erbil.nas@trendyol.com>
Date: Thu, 15 Feb 2024 16:28:54 +0300
Subject: [PATCH 3/3] fix(select): remove highlight when the select is disabled

---
 src/components/select/bl-select.ts | 12 ++----------
 1 file changed, 2 insertions(+), 10 deletions(-)

diff --git a/src/components/select/bl-select.ts b/src/components/select/bl-select.ts
index bd74eeef..24938f40 100644
--- a/src/components/select/bl-select.ts
+++ b/src/components/select/bl-select.ts
@@ -453,7 +453,7 @@ export default class BlSelect<ValueType extends FormValue = string> extends Form
             "select-input": true,
             "has-overflowed-options": this._additionalSelectedOptionCount > 0,
           })}
-          tabindex="${this.disabled ? "-1" : 0}"
+          tabindex="${ifDefined(this.disabled ? undefined : 0)}"
           ?autofocus=${this.autofocus}
           @click=${this._togglePopover}
           role="button"
@@ -551,15 +551,7 @@ export default class BlSelect<ValueType extends FormValue = string> extends Form
   private focusedOptionIndex = -1;
 
   private handleKeydown(event: KeyboardEvent) {
-    if (
-      this.focusedOptionIndex === -1 &&
-      !this.searchBar &&
-      !this.disabled &&
-      ["Space"].includes(event.code)
-    ) {
-      this._togglePopover();
-      event.preventDefault();
-    } else if (["Enter"].includes(event.code) && !this.disabled) {
+    if (this.focusedOptionIndex === -1 && ["Enter", "Space"].includes(event.code)) {
       this._togglePopover();
       event.preventDefault();
     } else if (this._isPopoverOpen === false && ["ArrowDown", "ArrowUp"].includes(event.code)) {