JedWatson / JedWatson/react-select

onBlur doesn't trigger when clicking on clear indicator of another select

Open
#5,664 0 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

issue/bug-unconfirmed
Dominant language
TypeScript
Stars
28k
Forks
4.1k
PR merge metrics
No merged PRs in 30d

Description

Hello!

I have Select with isClearable prop, and I have following logic - when I clear value in this select, the second Select should disable. So I set isDisabled to true in 2nd, when I clear value in 1st select.

Faced the following problem: when I focus 2nd Select, and then click on cross icon - onBlur event doesn't trigger. My select have styles depending on focused state, so without onBlur my select is always remain focused

select_blur

But it doesn't reproduce with simple button - when I focus 2nd Select and then disable it with button - onBlur fires.

I expect onBlur to be fired in both cases

I created reproduction

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start with the linked CodeSandbox reproduction, specifically example.tsx, and reproduce the sequence of focusing the second Select before clicking the clear indicator on the other Select. Trace the focus and blur behavior involved; done means onBlur fires when the clear indicator disables the focused Select, matching the button case.

Written by the indexing model from the issue text.

Assessment

Tech stack
react, typescript
Domain
frontend
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
38/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.