Disabled options can be selected by pressing Tab key

[taimoor-aslam]

Hello, I grasp the concept of utilizing disabled options, acknowledging that these options cannot be selected through a mouse cursor. Nevertheless, they remain "selectable" when pressing the Tab key.

[ericgio]

Hi @taimoor-aslam, thanks for the report. Can you please provide a sandbox and steps to repro the issue you're describing? I'm not seeing the behavior you describe.

[Nathan-Roberts123]

I found the similar bug, disabled options can be selected using the arrowDown key and arrowUp key then enter. I manage to avoid this issue by adding 'disabled: true' in my options data on a disabled field. e.g const countries = [{ name: 'USA', disabled: true }, ... ]. I don't know if this is an intended way of doing it.

[Michele-Masciave]

@ericgio here a reproduction of the issue:

Version

"react-bootstrap-typeahead": "6.3.2"
"reactstrap": "9.2.3"
"bootstrap": "5.3.3"
"react": "18.2"

Sandbox: https://codesandbox.io/p/sandbox/select-disabled-options-ontab-8kq3mn?file=%2Fsrc%2FApp.tsx%3A8%2C42

Expected Behavior

Options not selectable when accepting the hint on Tab.

Actual Behavior

The options are selectable on Tab even if they are disabled.