From f3d1c35f9f30520f6acbf0ad478ba69345948265 Mon Sep 17 00:00:00 2001
From: ahmetozantekin <ahmetozantekin@gmail.com>
Date: Thu, 6 Jun 2024 10:14:59 +0300
Subject: [PATCH] fix(select): fix disabled select option can be selected with
 enter (#874)

This pr fixes navigating in the select options with the arrow keys,
disabled option can be selected with enter bug.

Closes [873](https://github.com/Trendyol/baklava/issues/873)

---------

Co-authored-by: Ahmet Ozan Tekin <ahmetozan.tekin@trendyol.com>
---
 src/components/select/bl-select.stories.mdx | 19 +++++++++++++++++--
 src/components/select/bl-select.ts          |  6 ++++--
 2 files changed, 21 insertions(+), 4 deletions(-)

diff --git a/src/components/select/bl-select.stories.mdx b/src/components/select/bl-select.stories.mdx
index 01bc9860..8d0d33b3 100644
--- a/src/components/select/bl-select.stories.mdx
+++ b/src/components/select/bl-select.stories.mdx
@@ -64,7 +64,22 @@ export const defaultOptions = [{
   value: 'nl'
 },{
   label: 'Germany',
-  value: 'de'
+  value: 'de',
+},{
+  label: 'United Kingdom',
+  value: 'uk'
+}]
+
+export const defaultOptionsWithDisabled = [{
+  label: 'Turkiye',
+  value: 'tr'
+},{
+  label: 'The Netherlands',
+  value: 'nl'
+},{
+  label: 'Germany',
+  value: 'de',
+  disabled: true
 },{
   label: 'United Kingdom',
   value: 'uk'
@@ -161,7 +176,7 @@ Each option should be wrapped with `bl-select-option` component.
   <Story name="Select with initial value" args={{ placeholder: "Choose country", value: 'tr' }} play={selectOpener}>
     {SelectTemplate.bind({})}
   </Story>
-  <Story name="Select With Selected Option" args={{ placeholder: "Choose country", selected: ['nl']  }} play={selectOpener}>
+  <Story name="Select With Selected Option" args={{ options: defaultOptionsWithDisabled, placeholder: "Choose country", selected: ['nl']  }} play={selectOpener}>
     {SelectTemplate.bind({})}
   </Story>
 </Canvas>
diff --git a/src/components/select/bl-select.ts b/src/components/select/bl-select.ts
index c6063879..90d3bbfe 100644
--- a/src/components/select/bl-select.ts
+++ b/src/components/select/bl-select.ts
@@ -612,16 +612,18 @@ export default class BlSelect<ValueType extends FormValue = string> extends Form
       this.close();
       event.preventDefault();
     } else if (this._isPopoverOpen && ["ArrowDown", "ArrowUp"].includes(event.code)) {
+      const activeOptions = this.options.filter(option => !option.disabled);
+
       event.code === "ArrowDown" && this.focusedOptionIndex++;
       event.code === "ArrowUp" && this.focusedOptionIndex--;
 
       // Don't exceed array indexes
       this.focusedOptionIndex = Math.max(
         0,
-        Math.min(this.focusedOptionIndex, this.options.length - 1)
+        Math.min(this.focusedOptionIndex, activeOptions.length - 1)
       );
 
-      this.options[this.focusedOptionIndex].focus();
+      activeOptions[this.focusedOptionIndex].focus();
 
       event.preventDefault();
     } else if (this._isPopoverOpen && !this.searchBar) {