React-select: Select should not be styled as having focus when disabled

[arthurakay]

Are you asking a question?

I asked a question on SO... though after digging into the source code, I believe this may be the solution.

Are you reporting a bug or runtime error?

This is a bug in v3.1.0

https://codesandbox.io/s/react-select-v3-sandbox-forked-t8hol

Steps to reproduce in the linked example:

1. Choose a color in the first Select box
2. Click into the second Select box; notice the options correctly appear and the Select receives "focus"
3. Do not select an option in the second Select; with the options menu still open, click the "X" to clear the value in the first Select box

4. Notice that the second Select is correctly disabled (you cannot interact with it) but there are two issues:

   • First, the menu options are still visible (despite being disabled and you cannot interact with them)
   • Second, the disabled Select has styling applied to it indicating the element has focus (despite the fact it does not)

Proposed solution

1. The menu options should automatically close when the Select component is disabled
2. The Select box should not have styling applied to it indicating focus when disabled

I have been able to create a workaround for the first issue using the following configuration... though it would be great if this were simply the default behavior:

    // handles edge-case where menu is open but MODEL is cleared
    menuIsOpen={state.model === null ? false : undefined}

The second of these two items should be solved by changing the following line (45?) in Control.js

Change from:

boxShadow: isFocused ? `0 0 0 1px ${colors.primary}` : null,

to:

boxShadow: !isDisabled && isFocused ? `0 0 0 1px ${colors.primary}` : null,

[ebonow]

@arthurakay I've taken a little bit deeper look into this on my flight yesterday, and I agree it's an edge-case, but feels like the proposed solutions are a band-aid for the fact that a disabled Select is not properly doing the following things:

• blurring focus
• not closing the menu (assuming menuIsOption prop is undefined)
• not disabling menu options (assuming menuIsOpen is true)

I have begun to put together a PR that addresses these concerns...

[ebonow]

I checked in a PR for this.

If menuIsOpen=true, then the menu will stay open, but otherwise it will close the menu and blur the Select. No need to address the styling since the fix should address the internal state to accurate reflect that the select is not focused