Disabled reason for option in react-select

Question

Is there a way to show why an option is disabled when I use react-select ? Something like a disabledReason property in the option object ?

Answer 1

Assuming you want to show the reason alongside the disabled option in the menu, you can override how the option is rendered to render in a way that includes the reason.

How to do this exactly with the react-select API depends on if you are using V1 or V2 of react-select.

Example for V1: https://github.com/JedWatson/react-select/blob/v1.x/examples/src/components/CustomComponents.js
Docs for V2: https://react-select.com/props#replacing-components

Answer 2

One possible solution is

1. Use react's SyntheticEvent onMouseEnter on the react-selection component to check if mouse hover.
2. Check if the react-select components is disabled

3. If the react-select is disabled, show the a tooltip

   In React, onMouseEnter or hover is not working as expected

   https://reactjs.org/docs/events.html#mouse-events

   tooltip div with ReactJS