[balajis-qb]

Linked Issue: #6098

Problem

If a parent element moves focus away from the select during mousedown
(for example onMouseDown={() => ref.current?.focus()}), the events
happened in this order:

1. The select focused its input and asked to open the menu.
2. The parent took focus, so the input blurred. onBlur and onMenuClose ran.
3. The "open" request finished afterwards, in a setState callback.

The menu ended up open, but the input no longer had focus. A click outside
could not blur it again, so onBlur never fired and the menu never closed.

The fix

In openMenu(), the setState callback now calls onMenuOpen() only if
this.state.isFocused is still true. If focus was lost in the meantime,
the late "open" is skipped, so the select ends up closed and blurred.

Behaviour change to be aware of

In this focus-stealing setup the menu will no longer open on click. Before,
it opened but was unusable by keyboard and could not be closed by an outside
click. If you would rather keep the old behaviour, I am happy to try another
approach.

Alternative: workaround without changing the library

If this behaviour change is not wanted, the app can avoid the problem itself.
The cause is the parent calling focus() on every click, including clicks that
come from inside the select. Only steal focus for clicks on the parent itself:

onMouseDown={(e) => {
  if (e.target === e.currentTarget) nodeRef.current?.focus();
}}

If the maintainers prefer this answer, this PR can be closed.

Tests

Added a regression test to StateManaged.test.tsx: a select inside a parent
that focuses itself on mousedown. It checks that onBlur fires once and the
menu is closed. The test fails without the fix. All existing Jest suites pass.

Changeset

Added a patch changeset for react-select.

[changeset-bot]

🦋 Changeset detected

Latest commit: 9000a51

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

Name	Type
react-select	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[codesandbox-ci]

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.