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](#873) --------- Co-authored-by: Ahmet Ozan Tekin <[email protected]>
Trendyol · Jun 6, 2024 · f3d1c35 · f3d1c35
1 parent f07c5e5
commit f3d1c35
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 4 deletions.
diff --git 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
@@ -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) {