Dropdown not appearing on first click

[kuroshio]

When clicking a dropdown, there is no response the first time it's clicked. Clicking the dropdown a second time displays the options as expected. In addition, the dropdown closes once an option is clicked.

Again, this only happens in the production build. Everything works as expected in development. In addition, everything was working working fine on RC5, but I just upgraded to RC9 and started experiencing these issues in production build.

Note, I'm using react-select in the create-react-app boilerplate.

[JedWatson]

This is a known issue we've been tracking in #1980

I've updated that to be specific to the test that should have caught this, let's use this one to track actually fixing the bug.

The information about dev vs. production environments is new - I hadn't realised that before. @jochenberger that may be useful information when debugging why the tests don't fail?

[JedWatson]

Related PRs / issues for this bug: #1527 #1580 #1902

The problem will probably be somewhere around line 263 of Select.js

[jochenberger]

See also #1986

[JedWatson]

OK looked into this further, and I can't reproduce the difference between production and development - @kuroshio can you give us any more information about that?

Seems like the root cause is that openOnFocus is being used when the component is clicked. That's not what it was designed for - we need a different prop if we want to control whether the component opens on first click.

Unfortunately I missed the implication when I merged #1527

openOnFocus controls whether the menu opens when the control is focused either programatically or by the keyboard. By design it should default to false.

However, clicking a select component (in my experience) will always open the menu. If we want to support being able to click the control without opening the menu, we should add another prop called openOnClick which defaults to true.

@jonashaag @hakunin @lauterry would you like to comment on this? it would be great to better understand the use-case for the prop.

[gwyneplaine]

@JedWatson the current prop openAfterFocus does what you are proposing for openOnClick.

I would suggest renaming this prop to openOnClick or a name that is more indicative of the described behaviour. (unless there are strong arguments to the contrary)

[kuroshio]

@JedWatson My apologies, the same thing is now happening in development, different behaviour must have been due to browser cache

[jochenberger]

@gwyneplaine: if we do that, then it should probably default to true.

[haipham23]

as @gwyneplaine mentioned, set openOnFocus={true} would fix the issue.

[hakunin]

@JedWatson We were using openOnFocus={false} to be able to click the area of the select and have only a certain item (that was always there) open the select.

Like this:

We've moved away from using select for that and essentially re-implemented select box behavior, but now we have control over it

[JedWatson]

Done. There's now a openOnClick prop which defaults to true, and I've removed the old openAfterFocus prop. The openOnFocus prop works as expected.

Really glad to have fixed this behaviour 😁

[jochenberger]

On second thought, the name "openOnClick" might is a little bit confusing. When set to false, the menu will actually open on click anyway, just not when the Select does not have focus. But while "openOnClickWhenNotFocussed" might be more correct, it is also more clumsy.

[elghali]

But even when openOnClick prop is set to false the menu still opens, is the props not working? or am I expecting a wrong behavior?