React-select: Select not closes on blur

[claudvanbarret]

If select has the option defaultMenuIsOpen = true. It no closes on blur or selecting an option.

[akondratsky]

Sharing results of my investigation of this issue.

1. If I set defaultMenuIsOpen={true}, menu doesn't close on blur or selecting an option.

2. If I click once on input, menu will close on blur or selection an option.

3. Enabling autoFocus option doesn't help.

4. Calling select.inputRef.focus() of current Select's ref doesn't help

5. It works when focusing has async character, f.e.:

    componentDidMount() {
        setTimeout(() => {
            this.selectRef.current.select.inputRef.focus();
        });
    }

So you can use crutch above if you need fast fix. I apologise for I can't continue investigating and fixing this issue, but I hope this information will help to someone to fix it.

[bladey]

Hi @claudvanbarret,

I can reproduce this issue using defaultMenuIsOpen={true} however it's intended not to close by default as the select isn't focused.

There is no blur because you haven't actually focused it.

You can change this by using autoFocus={true} in addition to defaultMenuIsOpen={true}, the menu will then be closed on blur.

This works for me as shown below, but it sounds like it doesn't for you or @akondratsky.

My running example is - https://codesandbox.io/s/react-codesandboxer-example-trpnp

Could you please give me more information so I can reproduce this such as OS, browser and browser version, as well as a Code Sandbox link that I can check.

[claudvanbarret]

Hello @bladey.

Indeed, the bug is no happening. Was there a recent update?

I think using autoFocus={true} in addition to defaultMenuIsOpen={true} can resolve my problem.

Thanks.

[bladey]

Hi @claudvanbarret,

The last update was on 22nd March -- https://github.com/JedWatson/react-select/releases/tag/react-select%403.1.0

It looks like one of the bug fixes may have resolved this problem.