From 17ee9be7a153d901635e4a2454b1df88bf0c6b6d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Murat=20=C3=87orlu?=
 <127687+muratcorlu@users.noreply.github.com>
Date: Thu, 29 Sep 2022 09:46:25 +0200
Subject: [PATCH] fix(select): fix delay of arrow icon change on opening popup
 (#256)

---
 commitlint.config.js                    |  3 ++-
 src/components/select/bl-select.css     | 12 ++++++++++++
 src/components/select/bl-select.test.ts |  3 ++-
 src/components/select/bl-select.ts      |  9 +++++++--
 4 files changed, 23 insertions(+), 4 deletions(-)

diff --git a/commitlint.config.js b/commitlint.config.js
index ac868546..846ffec2 100644
--- a/commitlint.config.js
+++ b/commitlint.config.js
@@ -16,7 +16,8 @@ module.exports = {
         'tooltip',
         'progress-indicator',
         'checkbox',
-        'alert'
+        'alert',
+        'select'
       ],
     ],
   },
diff --git a/src/components/select/bl-select.css b/src/components/select/bl-select.css
index 1b161afc..7592d086 100644
--- a/src/components/select/bl-select.css
+++ b/src/components/select/bl-select.css
@@ -94,6 +94,18 @@
   font-size: var(--bl-font-size-m);
 }
 
+.dropdown-icon.open {
+  display: none;
+}
+
+.select-open .dropdown-icon.open {
+  display: inline-block;
+}
+
+.select-open .dropdown-icon.closed {
+  display: none;
+}
+
 .selected .dropdown-icon {
   --icon-color: var(--bl-color-secondary);
 }
diff --git a/src/components/select/bl-select.test.ts b/src/components/select/bl-select.test.ts
index e5c428a3..f588b524 100644
--- a/src/components/select/bl-select.test.ts
+++ b/src/components/select/bl-select.test.ts
@@ -27,7 +27,8 @@ describe('bl-select', () => {
             variant="secondary"
           >
           </bl-button>
-          <bl-icon  class="dropdown-icon" name="arrow_down"></bl-icon>
+          <bl-icon class="dropdown-icon open" name="arrow_up"></bl-icon>
+          <bl-icon class="dropdown-icon closed" name="arrow_down"></bl-icon>
           </div>
         </div>
         <div class="popover">
diff --git a/src/components/select/bl-select.ts b/src/components/select/bl-select.ts
index ec0d4d63..968ebbc2 100644
--- a/src/components/select/bl-select.ts
+++ b/src/components/select/bl-select.ts
@@ -211,8 +211,13 @@ export default class BlSelect extends LitElement {
       <div class="actions">
         ${removeButton}
         <bl-icon
-          class="dropdown-icon"
-          name="${this._isPopoverOpen ? 'arrow_up' : 'arrow_down'}"
+          class="dropdown-icon open"
+          name="arrow_up"
+        ></bl-icon>
+
+        <bl-icon
+          class="dropdown-icon closed"
+          name="arrow_down"
         ></bl-icon>
       </div>
     </div>`;