playbook_ui 16.9.0 → 16.10.0.pre.alpha.PLAY3053advancedtablebottompinnedrowsreact17469

data/app/pb_kits/playbook/pb_dropdown/docs/_playground.overrides.json

@@ -4,23 +4,39 @@
     "modes": {
       "simple": {
         "label": "Simple",
-        "template": "<Dropdown{{props}} />",
+        "template": "<Dropdown options={options}{{props}} />",
         "children": ""
       },
       "subcomponents": {
         "label": "With Subcomponents",
-        "template": "<Dropdown{{props}}>\n  <Dropdown.Trigger />\n  <Dropdown.Container>\n    <Dropdown.Option option={({ label: 'United States', value: 'unitedStates', id: 'us' })} />\n    <Dropdown.Option option={({ label: 'Canada', value: 'canada', id: 'ca' })} />\n    <Dropdown.Option option={({ label: 'Pakistan', value: 'pakistan', id: 'pk' })} />\n  </Dropdown.Container>\n</Dropdown>",
-        "children": "",
-        "props": {
-          "options": [
-            { "label": "United States", "value": "unitedStates", "id": "us" },
-            { "label": "Canada", "value": "canada", "id": "ca" },
-            { "label": "Pakistan", "value": "pakistan", "id": "pk" }
-          ]
-        }
+        "template": "<Dropdown options={options}{{props}}>\n  <Dropdown.Trigger />\n  <Dropdown.Container>\n    {options.map((option) => (\n      <Dropdown.Option key={option.id} option={option} />\n    ))}\n  </Dropdown.Container>\n</Dropdown>",
+        "children": ""
       }
     }
   },
+  "customProps": {
+    "options": {
+      "type": "array",
+      "platforms": ["react", "rails"],
+      "description": "Dropdown option data with label, value, id, and optional disabled state."
+    }
+  },
+  "requiredProps": {
+    "options": [
+      { "label": "United States", "value": "unitedStates", "id": "us" },
+      { "label": "Canada", "value": "canada", "id": "ca", "disabled": true },
+      { "label": "Pakistan", "value": "pakistan", "id": "pk" },
+      { "label": "Mexico", "value": "mexico", "id": "mx", "disabled": true },
+      { "label": "United Kingdom", "value": "unitedKingdom", "id": "gb" },
+      { "label": "India", "value": "india", "id": "in" },
+      { "label": "Australia", "value": "australia", "id": "au" },
+      { "label": "New Zealand", "value": "newZealand", "id": "nz" },
+      { "label": "Italy", "value": "italy", "id": "it" },
+      { "label": "Germany", "value": "germany", "id": "de" },
+      { "label": "Brazil", "value": "brazil", "id": "br" },
+      { "label": "Philippines", "value": "philippines", "id": "ph" }
+    ]
+  },
   "defaults": {
     "autocomplete": false,
     "blankSelection": "",
@@ -32,8 +48,17 @@
     "multiSelect": false,
     "options": [
       { "label": "United States", "value": "unitedStates", "id": "us" },
-      { "label": "Canada", "value": "canada", "id": "ca" },
-      { "label": "Pakistan", "value": "pakistan", "id": "pk" }
+      { "label": "Canada", "value": "canada", "id": "ca", "disabled": true },
+      { "label": "Pakistan", "value": "pakistan", "id": "pk" },
+      { "label": "Mexico", "value": "mexico", "id": "mx", "disabled": true },
+      { "label": "United Kingdom", "value": "unitedKingdom", "id": "gb" },
+      { "label": "India", "value": "india", "id": "in" },
+      { "label": "Australia", "value": "australia", "id": "au" },
+      { "label": "New Zealand", "value": "newZealand", "id": "nz" },
+      { "label": "Italy", "value": "italy", "id": "it" },
+      { "label": "Germany", "value": "germany", "id": "de" },
+      { "label": "Brazil", "value": "brazil", "id": "br" },
+      { "label": "Philippines", "value": "philippines", "id": "ph" }
     ],
     "placeholder": "Select a country",
     "requiredIndicator": false,
@@ -80,7 +105,8 @@
         "separators",
         "formPillProps",
         "activeStyle",
-        "dark"
+        "dark",
+        "disabled"
       ]
     },
     {
@@ -93,36 +119,28 @@
       "name": "Default trigger",
       "props": {
         "variant": "default",
-        "placeholder": "Select a country",
-        "options": [
-          { "label": "United States", "value": "unitedStates", "id": "us" },
-          { "label": "Canada", "value": "canada", "id": "ca" },
-          { "label": "Mexico", "value": "mexico", "id": "mx" }
-        ]
+        "placeholder": "Select a country"
       }
     },
     {
       "name": "With label",
       "props": {
         "label": "Select a Country",
-        "placeholder": "Choose a country",
-        "options": [
-          { "label": "United States", "value": "unitedStates", "id": "us" },
-          { "label": "Canada", "value": "canada", "id": "ca" },
-          { "label": "Pakistan", "value": "pakistan", "id": "pk" }
-        ]
+        "placeholder": "Choose a country"
+      }
+    },
+    {
+      "name": "Disabled options",
+      "props": {
+        "label": "Select a Country",
+        "placeholder": "Choose a country"
       }
     },
     {
       "name": "Subtle Variant",
       "props": {
         "variant": "subtle",
-        "separators": false,
-        "options": [
-          { "label": "Alpha", "value": "alpha", "id": "a" },
-          { "label": "Beta", "value": "beta", "id": "b" },
-          { "label": "Gamma", "value": "gamma", "id": "g" }
-        ]
+        "separators": false
       }
     },
     {
@@ -183,13 +201,7 @@
       "props": {
         "variant": "default",
         "multiSelect": true,
-        "placeholder": "Select regions",
-        "options": [
-          { "label": "North", "value": "north", "id": "n" },
-          { "label": "South", "value": "south", "id": "s" },
-          { "label": "East", "value": "east", "id": "e" },
-          { "label": "West", "value": "west", "id": "w" }
-        ]
+        "placeholder": "Select countries"
       }
     },
     {
@@ -202,16 +214,6 @@
         "defaultValue": [
           { "label": "United States", "value": "unitedStates" },
           { "label": "Italy", "value": "italy" }
-        ],
-        "options": [
-          { "label": "United States", "value": "unitedStates", "id": "us" },
-          { "label": "United Kingdom", "value": "unitedKingdom", "id": "gb" },
-          { "label": "Canada", "value": "canada", "id": "ca" },
-          { "label": "Pakistan", "value": "pakistan", "id": "pk" },
-          { "label": "India", "value": "india", "id": "in" },
-          { "label": "Australia", "value": "australia", "id": "au" },
-          { "label": "New Zealand", "value": "newZealand", "id": "nz" },
-          { "label": "Italy", "value": "italy", "id": "it" }
         ]
       }
     },
@@ -221,11 +223,7 @@
         "variant": "default",
         "label": "Required field",
         "placeholder": "Required field",
-        "error": "Please make a selection.",
-        "options": [
-          { "label": "Option A", "value": "a", "id": "a" },
-          { "label": "Option B", "value": "b", "id": "b" }
-        ]
+        "error": "Please make a selection."
       }
     },
     {
@@ -233,33 +231,14 @@
       "props": {
         "variant": "default",
         "autocomplete": true,
-        "placeholder": "Search…",
-        "options": [
-          { "label": "Apple", "value": "apple", "id": "1" },
-          { "label": "Apricot", "value": "apricot", "id": "2" },
-          { "label": "Banana", "value": "banana", "id": "3" }
-        ]
+        "placeholder": "Search..."
       }
     },
     {
       "name": "Constrained height",
       "props": {
         "label": "Choose an Option",
-        "constrainHeight": true,
-        "options": [
-          { "label": "Option 1", "value": "option_1", "id": "opt_1" },
-          { "label": "Option 2", "value": "option_2", "id": "opt_2" },
-          { "label": "Option 3", "value": "option_3", "id": "opt_3" },
-          { "label": "Option 4", "value": "option_4", "id": "opt_4" },
-          { "label": "Option 5", "value": "option_5", "id": "opt_5" },
-          { "label": "Option 6", "value": "option_6", "id": "opt_6" },
-          { "label": "Option 7", "value": "option_7", "id": "opt_7" },
-          { "label": "Option 8", "value": "option_8", "id": "opt_8" },
-          { "label": "Option 9", "value": "option_9", "id": "opt_9" },
-          { "label": "Option 10", "value": "option_10", "id": "opt_10" },
-          { "label": "Option 11", "value": "option_11", "id": "opt_11" },
-          { "label": "Option 12", "value": "option_12", "id": "opt_12" }
-        ]
+        "constrainHeight": true
       }
     }
   ],
@@ -302,6 +281,11 @@
       "message": "constrainHeight restricts the height of the dropdown menu and enables vertical scrolling when the content exceeds this height. This prevents long dropdown lists from rendering off-screen.",
       "type": "info"
     },
+    "disabled_options_info": {
+      "presetName": "Disabled options",
+      "message": "Set disabled: true on individual option objects to keep them visible while preventing selection.",
+      "type": "info"
+    },
     "subcomponent_structure_info": {
       "message": "Switch Structure to “With Subcomponents” to see the explicit Dropdown.Trigger, Dropdown.Container, and Dropdown.Option composition API.",
       "type": "info"

data/app/pb_kits/playbook/pb_dropdown/docs/example.yml

@@ -6,12 +6,14 @@ examples:
   - dropdown_multi_select_with_autocomplete: Multi Select with Autocomplete
   - dropdown_multi_select_display_rails: Multi Select with Form Pill Props
   - dropdown_subtle_variant: Subtle Variant
+  - dropdown_disabled_option: Disabled Option
   - dropdown_subcomponent_structure_rails: Subcomponent Structure
   - dropdown_with_autocomplete_with_subcomponents: Autocomplete with Subcomponent Structure
   - dropdown_with_label: With Label
   - dropdown_with_custom_options_rails: Custom Options
   - dropdown_multi_select_with_custom_options: Multi Select with Custom Options
   - dropdown_with_custom_display_rails: Custom Display
+  - dropdown_custom_display_disabled_option: Custom Display Disabled Option
   - dropdown_with_custom_trigger_rails: Custom Trigger
   - dropdown_with_search_rails: Custom Trigger Dropdown with Search
   - dropdown_with_custom_padding: Custom Option Padding
@@ -33,6 +35,7 @@ examples:
   - dropdown_quickpick_with_date_pickers_rails: Quick Pick with Date Pickers
   - dropdown_quickpick_with_date_pickers_default_rails: Quick Pick with Date Pickers (Default Value)
   - dropdown_required_indicator: Required Indicator
+  - dropdown_disabled: Disabled Input
   - dropdown_custom_event_type: Custom Event Type
 
   react:
@@ -42,10 +45,12 @@ examples:
   - dropdown_multi_select_with_autocomplete: Multi Select with Autocomplete
   - dropdown_multi_select_display: Multi Select with Form Pill Props
   - dropdown_subtle_variant: Subtle Variant
+  - dropdown_disabled_option: Disabled Option
   - dropdown_subcomponent_structure: Subcomponent Structure
   - dropdown_with_autocomplete_with_subcomponents: Autocomplete with Subcomponent Structure
   - dropdown_with_label: With Label
   - dropdown_with_custom_options: Custom Options
+  - dropdown_custom_display_disabled_option: Custom Display Disabled Option
   - dropdown_multi_select_with_custom_options: Multi Select with Custom Options
   - dropdown_with_custom_display: Custom Display
   - dropdown_with_custom_trigger: Custom Trigger
@@ -71,3 +76,4 @@ examples:
   - dropdown_quickpick_custom: Quick Pick Variant (Custom Quick Pick Dates)
   - dropdown_quickpick_with_date_pickers: Quick Pick Variant with Date Pickers
   - dropdown_required_indicator: Required Indicator
+  - dropdown_disabled: Disabled Input

data/app/pb_kits/playbook/pb_dropdown/docs/index.js

@@ -33,3 +33,6 @@ export { default as DropdownWithClearable } from './_dropdown_with_clearable.jsx
 export { default as DropdownWithConstrainHeight } from './_dropdown_with_constrain_height.jsx'
 export { default as DropdownClosingOptions } from './_dropdown_closing_options.jsx'
 export { default as DropdownRequiredIndicator } from "./_dropdown_required_indicator.jsx";
+export { default as DropdownDisabledOption } from "./_dropdown_disabled_option.jsx";
+export { default as DropdownCustomDisplayDisabledOption } from "./_dropdown_custom_display_disabled_option.jsx";
+export { default as DropdownDisabled } from "./_dropdown_disabled.jsx";

data/app/pb_kits/playbook/pb_dropdown/dropdown.html.erb

@@ -18,11 +18,12 @@
             data-dropdown-selected-option
             name="<%= object.name %><%= '[]' if object.multi_select %>"
             style="display: none"
+            <%= object.disabled ? "disabled" : ""%>
             <%= object.required ? "required" : ""%>
         />
         <% if object.variant == "quickpick" %>
-          <input id="<%= object.start_date_id %>" name="<%= object.start_date_name %>" style="display: none">
-          <input id="<%= object.end_date_id %>" name="<%= object.end_date_name %>" style="display: none">
+          <input id="<%= object.start_date_id %>" name="<%= object.start_date_name %>" style="display: none" <%= object.disabled ? "disabled" : ""%>>
+          <input id="<%= object.end_date_id %>" name="<%= object.end_date_name %>" style="display: none" <%= object.disabled ? "disabled" : ""%>>
         <% end %>
         <% if content.present? %>
             <%= content.presence %>
@@ -30,8 +31,8 @@
                 <%= pb_rails("body", props: { status: "negative", text: object.error, id: object.error_id, aria: { atomic: "true", live: "polite" }, html_options: { role: "alert" }, dark: object.dark }) %>
             <% end %>
         <% else %>
-            <%= pb_rails("dropdown/dropdown_trigger", props: { autocomplete: object.autocomplete, multi_select: object.multi_select, placeholder: object.placeholder, select_id: object.select_id, label: object.label, error_id: object.error_id, error: object.error }) %>
-            <%= pb_rails("dropdown/dropdown_container", props: { searchbar: object.searchbar, constrain_height: object.constrain_height }) do %>
+            <%= pb_rails("dropdown/dropdown_trigger", props: { autocomplete: object.autocomplete, disabled: object.disabled, multi_select: object.multi_select, placeholder: object.placeholder, select_id: object.select_id, label: object.label, error_id: object.error_id, error: object.error }) %>
+            <%= pb_rails("dropdown/dropdown_container", props: { searchbar: object.searchbar, constrain_height: object.constrain_height, disabled: object.disabled }) do %>
                 <% if options_with_blank.present? %>
                     <% options_with_blank.each do |option| %>
                         <%= pb_rails("dropdown/dropdown_option", props: {option: option}) %>

data/app/pb_kits/playbook/pb_dropdown/dropdown.rb

@@ -18,6 +18,8 @@ module Playbook
                              default: ""
       prop :custom_quick_pick_dates, type: Playbook::Props::HashProp,
                                      default: {}
+      prop :disabled, type: Playbook::Props::Boolean,
+                      default: false
       prop :variant, type: Playbook::Props::Enum,
                      values: %w[default subtle quickpick],
                      default: "default"
@@ -62,6 +64,7 @@ module Playbook
         Hash(prop(:data)).merge(
           pb_dropdown: true,
           pb_dropdown_multi_select: multi_select,
+          pb_dropdown_disabled: disabled,
           pb_dropdown_variant: variant,
           pb_dropdown_clearable: clearable,
           pb_dropdown_close_on_click: close_on_click,
@@ -75,7 +78,9 @@ module Playbook
       end
 
       def classname
-        generate_classname("pb_dropdown", variant, separators_class)
+        classes = generate_classname("pb_dropdown", variant, separators_class)
+        classes << " disabled" if disabled
+        classes
       end
 
       def select_id

data/app/pb_kits/playbook/pb_dropdown/dropdown.test.jsx

@@ -238,6 +238,46 @@ test('generated custom option', () => {
   expect(customOption).toBeInTheDocument()
 })
 
+test('disabled custom option does not select and marks child wrapper disabled', () => {
+  const onSelect = jest.fn()
+  const disabledOptions = [
+    {
+      label: 'Enabled',
+      value: 'enabled',
+      id: 'enabled',
+    },
+    {
+      label: 'Disabled',
+      value: 'disabled',
+      id: 'disabled',
+      disabled: true,
+    },
+  ]
+
+  render(
+    <Dropdown
+        data={{ testid: testId }}
+        onSelect={onSelect}
+        options={disabledOptions}
+    >
+      {disabledOptions.map((option) => (
+        <Dropdown.Option key={option.id}
+            option={option}
+        >
+          <span>{option.label}</span>
+        </Dropdown.Option>
+      ))}
+    </Dropdown>
+  )
+
+  const disabledChild = screen.getByText('Disabled')
+  fireEvent.click(disabledChild)
+
+  expect(onSelect).not.toHaveBeenCalled()
+  expect(disabledChild.parentElement).toHaveClass('dropdown_option_wrapper', 'disabled')
+  expect(disabledChild.closest('[aria-disabled="true"]')).toBeInTheDocument()
+})
+
 test('generated custom Trigger', () => {
   render (
     <Dropdown
@@ -832,4 +872,60 @@ describe("quickpick Last Month range when current month is shorter than the prev
     expect(formatDate(startDate)).toBe(formatDate(DateTime.getPreviousMonthStartDate(now)))
     expect(formatDate(endDate)).toBe(formatDate(DateTime.getPreviousMonthEndDate(now)))
   })
+})
+
+test('disabled prop prevents dropdown from opening', () => {
+  render(
+    <Dropdown
+        data={{ testid: testId }}
+        disabled
+        options={options}
+    />
+  )
+
+  const kit = screen.getByTestId(testId)
+  expect(kit).toHaveClass('disabled')
+
+  const trigger = kit.querySelector('.dropdown_trigger_wrapper_select_only')
+  const container = kit.querySelector('.pb_dropdown_container')
+
+  fireEvent.click(trigger)
+
+  expect(container).toHaveClass('close')
+  expect(container).not.toHaveClass('open')
+})
+
+test('disabled prop prevents dropdown from opening with keyboard', () => {
+  render(
+    <Dropdown
+        data={{ testid: testId }}
+        disabled
+        options={options}
+    />
+  )
+
+  const kit = screen.getByTestId(testId)
+  const trigger = kit.querySelector('.dropdown_trigger_wrapper_select_only')
+  const container = kit.querySelector('.pb_dropdown_container')
+
+  fireEvent.keyDown(trigger, { key: 'Enter' })
+
+  expect(container).toHaveClass('close')
+  expect(container).not.toHaveClass('open')
+})
+
+test('disabled prop disables autocomplete input', () => {
+  render(
+    <Dropdown
+        autocomplete
+        data={{ testid: testId }}
+        disabled
+        options={options}
+    />
+  )
+
+  const kit = screen.getByTestId(testId)
+  const input = kit.querySelector('.dropdown_input')
+
+  expect(input).toBeDisabled()
 })

data/app/pb_kits/playbook/pb_dropdown/dropdown_container.html.erb

@@ -5,6 +5,7 @@
             type="text"
             placeholder="Search…"
             data-dropdown-search
+            <%= object.disabled ? "disabled" : "" %>
             autocomplete="off"
             />
         <% end %>

data/app/pb_kits/playbook/pb_dropdown/dropdown_container.rb

@@ -7,6 +7,8 @@ module Playbook
                        default: false
       prop :constrain_height, type: Playbook::Props::Boolean,
                               default: false
+      prop :disabled, type: Playbook::Props::Boolean,
+                      default: false
 
       def classname
         classes = %w[pb_dropdown_container close]

data/app/pb_kits/playbook/pb_dropdown/dropdown_option.html.erb

@@ -1,11 +1,11 @@
-<%= pb_content_tag(:div, id: object.option[:id]) do %>
+<%= pb_content_tag(:div, id: object.option_id, aria: { disabled: object.disabled }) do %>
     <%= pb_rails("list/item", props: {
         display: "flex",
         justify_content: "center",
         padding:"none",
         cursor: "pointer"
         }) do %>
-            <div class="dropdown_option_wrapper">
+            <div class="<%= object.option_wrapper_class %>">
                 <% if content.present? %>
                     <%= content.presence %>
                 <% else %>

data/app/pb_kits/playbook/pb_dropdown/dropdown_option.rb

@@ -7,11 +7,36 @@ module Playbook
       prop :id, type: Playbook::Props::String
 
       def data
-        Hash(prop(:data)).merge("dropdown_option_label": option)
+        Hash(prop(:data)).merge(
+          "dropdown_option_disabled": disabled,
+          "dropdown_option_label": option
+        )
       end
 
       def classname
-        generate_classname("pb_dropdown_option", "list")
+        "#{generate_classname('pb_dropdown_option', 'list')}#{disabled_class}"
+      end
+
+      def disabled
+        option_value(:disabled) == true
+      end
+
+      def option_id
+        option_value(:id)
+      end
+
+      def option_wrapper_class
+        disabled ? "dropdown_option_wrapper disabled" : "dropdown_option_wrapper"
+      end
+
+    private
+
+      def disabled_class
+        disabled ? " disabled" : ""
+      end
+
+      def option_value(key)
+        option[key] || option[key.to_s]
       end
     end
   end

data/app/pb_kits/playbook/pb_dropdown/dropdown_trigger.html.erb

@@ -1,6 +1,6 @@
 <%= pb_content_tag do %>
     <% if content.present? %>
-        <div style="display: inline-block" tabindex="0" data-dropdown="pb-dropdown-trigger" data-dropdown-custom-trigger aria-invalid="<%= object.error.present? %>"
+        <div style="display: inline-block" tabindex="<%= object.disabled ? "-1" : "0" %>" data-dropdown="pb-dropdown-trigger" data-dropdown-custom-trigger aria-disabled="<%= object.disabled %>" aria-invalid="<%= object.error.present? %>"
             <% if object.label.present? %> aria-label="<%= [object.label, object.default_display_placeholder].join(', ') %>"<% end %>
             <% if object.select_id.present? %> id="<%= object.select_id %>"<% end %>
             <% if object.error_id.present? %> aria-describedby="<%= object.error_id %>"<% end %>
@@ -17,7 +17,7 @@
         justify: "between",
         padding_x:"sm",
         padding_y:"xs",
-        html_options: { tabindex: "0", "aria-label": object.label.present? ? [object.label, object.default_display_placeholder].join(", ") : nil, "aria-describedby": object.error_id, "aria-invalid": object.error.present?, "data-dropdown": "pb-dropdown-trigger" }
+        html_options: { tabindex: object.disabled ? "-1" : "0", "aria-disabled": object.disabled, "aria-label": object.label.present? ? [object.label, object.default_display_placeholder].join(", ") : nil, "aria-describedby": object.error_id, "aria-invalid": object.error.present?, "data-dropdown": "pb-dropdown-trigger" }
         }) do %>
         <%= pb_rails("flex/flex_item", props: { fixed_size: object.multi_select ? "85%" : "" }) do %>
             <%= pb_rails("flex", props: {align: "center"}) do %>
@@ -37,6 +37,7 @@
                                 <input
                                     data-dropdown-autocomplete
                                     class="dropdown_input"
+                                    <%= object.disabled ? "disabled" : "" %>
                                     type="text"
                                     placeholder="<%= object.placeholder || 'Select…' %>"
                                     autocomplete="off"
@@ -50,6 +51,7 @@
                             <input
                                 data-dropdown-autocomplete
                                 class="dropdown_input"
+                                <%= object.disabled ? "disabled" : "" %>
                                 type="text"
                                 placeholder="<%= object.placeholder || 'Select…' %>"
                                 autocomplete="off"

data/app/pb_kits/playbook/pb_dropdown/dropdown_trigger.rb

@@ -11,6 +11,8 @@ module Playbook
       prop :custom_display
       prop :autocomplete, type: Playbook::Props::Boolean,
                           default: false
+      prop :disabled, type: Playbook::Props::Boolean,
+                      default: false
       prop :multi_select, type: Playbook::Props::Boolean,
                           default: false
       prop :select_id, type: Playbook::Props::String

data/app/pb_kits/playbook/pb_dropdown/hooks/useHandleOnKeydown.tsx

@@ -15,6 +15,28 @@ const {
   setIsDropDownClosed,
 }= useContext(DropdownContext)
 
+  // Helper function to find next non-disabled option
+  const findNextAvailableIndex = (currentIndex: number, direction: 'forward' | 'backward'): number => {
+    let nextIndex = currentIndex;
+    let attempts = 0;
+
+    while (attempts < filteredOptions.length) {
+      if (direction === 'forward') {
+        nextIndex = (nextIndex + 1) % filteredOptions.length;
+      } else {
+        nextIndex = (nextIndex - 1 + filteredOptions.length) % filteredOptions.length;
+      }
+
+      if (!filteredOptions[nextIndex]?.disabled) {
+        return nextIndex;
+      }
+      attempts++;
+    }
+
+    // If all options are disabled, return current index
+    return currentIndex;
+  };
+
   return (e: React.KeyboardEvent) => {
 
     if (e.key !== "Tab" && autocomplete && selected && selected.label) {
@@ -25,20 +47,18 @@ const {
     case "ArrowDown": {
       e.preventDefault();
       setIsDropDownClosed(false);
-      const nextIndex = (focusedOptionIndex + 1) % filteredOptions.length;
+      const nextIndex = findNextAvailableIndex(focusedOptionIndex, 'forward');
       setFocusedOptionIndex(nextIndex);
       break;
     }
     case "ArrowUp": {
       e.preventDefault();
-      const nextIndexUp =
-        (focusedOptionIndex - 1 + filteredOptions.length) %
-        filteredOptions.length;
+      const nextIndexUp = findNextAvailableIndex(focusedOptionIndex, 'backward');
       setFocusedOptionIndex(nextIndexUp);
       break;
     }
     case "Enter":
-      if (focusedOptionIndex !== -1) {
+      if (focusedOptionIndex !== -1 && !filteredOptions[focusedOptionIndex]?.disabled) {
         e.preventDefault();
         handleOptionClick(filteredOptions[focusedOptionIndex]);
         setFocusedOptionIndex(-1)