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.
{SelectTemplate.bind({})}
-
+
{SelectTemplate.bind({})}
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 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) {