Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Feature Request: Skip keyboard navigation of disabled options

See original GitHub issue

Current results:

When isOptionDisabled prop is present, it disables all selecting option value events (click, keyboard), but does not skip it’s focus via keyboard when clicking arrow keys up and down.

Expected results:

If option is disabled, when navigating via keyboard it should skip it. The focus should go to another available option. Example, default select behavior: https://jsfiddle.net/zm7uanxo/1/
It worked like this at least in v1 of the plugin, when I tried it.

Issue Analytics

State:
Created 4 years ago
Reactions:4
Comments:10

Top GitHub Comments

1reaction

luke-webdevcommented, Jan 22, 2020

My proposal is to add a skipDisabled boolean prop that defaults to false to maintain backwards compatibility.

I can work on creating a pull request for this issue if this is okay.

1reaction

luke-webdevcommented, Jan 21, 2020

I was looking into this and there’s actually a test that verifies disabled options to be focusable.

https://github.com/JedWatson/react-select/blob/master/packages/react-select/src/__tests__/Select.test.js#L806

I was wondering if this is really the expected behaviour because the native <select> element skips disabled options. It would be nice to give the user the ability to control skipping vs not skipping as we have a requirement to skip the disabled ones.

Edit: Looks like this was intended to apply accessibility to disabled options: #3445