JedWatson / JedWatson/react-select
onBlur behaviour is affected by "touch capabilities"
Nobody has claimed this yet.
- Dominant language
- TypeScript
- Stars
- 28k
- Forks
- 4.1k
- PR merge metrics
- No merged PRs in 30d
Description
Are you reporting a bug or runtime error?
That's not really a bug, and not an error - this is a not correct behavior.
There is an option - blurInputOnSelect
blurInputOnSelect: isTouchCapable(),
and the effect of it quite simple:
selectOption = (newValue: OptionType) => {
....
if (blurInputOnSelect) {
this.blurInput();
}
Problems
-
Should it be delayed?
In normal conditions there are two different events (click/change, blur) comes one after another with a little "gap" between them. But in this case - there is no gap. This results into some differences in the "state management" -blurevens is reported too soon - before thechange(or select) event is finishing propagation (state change applied back to the component).
ProbablyonBlurshould be called insetTimeout, or at least aPromise -
Should it even exists?
For all "touch devices", windows 10 on hybrid devices included, or only when select is caused by "touch" event? Probably here we should checktouch event, and executebluronly there, but not as a part ofselectOption -
Is it a real problem? Yes, it is. We run into it twice this year, causing SEV1s both times.
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start in packages/react-select/src/Select.js at the blurInputOnSelect option, selectOption, and the touch-event handling referenced in the issue. Reproduce the ordering between selection and onBlur, then determine the intended behavior for touch-capable and hybrid devices. Done requires a maintainer decision on both timing and when blur should occur, followed by coverage for that behavior.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- react, typescript
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 5/5
- Estimated time
- Over a week
- Activity status
- Stale
- Clarity
- Needs clarification
- Newbie friendliness
- 25/100