Comments (14)
I think this issue should be re-opened as well. I am currently rendering a React-Select
component in a Formik
form, and was running into issues because there wasn't an obvious way to run the React-Select
onBlur
after onChange
.
To be more specific, the form has a validation that says the input field is a required field. To ensure this, my onBlur
handler sets the Formik
field to touched
which triggers the validation handler to run and surface the error:
<Select
...
onBlur={() => setFieldTouched()}
/>
When I do select an option I am setting the Formik
field manually in the Select onChange
:
<Select
...
onChange={({ value }: { value: string; label: string }) => setFieldValue(value)}
/>
Lastly, I also have a design requirement that the dropdown loses focus on selection, which is easily handled with the blurInputOnSelect
flag.
My issue is that enabling the blurInputOnSelect
forces the onBlur
handler to run before the onChange
handler, so the validation error was surfacing even though the field was valid.
After much trial and error, the only solution I could think of was to use setTimeout
to force the Formik
handler to get added to behind the onChange
handler in the event queue.
<Select
...
onChange={({ value }: { value: string; label: string }) => setFieldValue(value)}
onBlur={() => {
setTimeout(() => setFieldTouched(), 1);
}}
blurInputOnSelect
/>
This solution is not ideal as it is best practice to avoid async functions in react outside of hooks. Is it possible to introduce a blurOnChange
flag or modify the blurOnInputSelect
flag to mimic this behavior? Is there a reason the onBlur
has to occur before onChange
?
@JedWatson if you have a moment I would greatly appreciate your insight on this matter.
from react-select.
Why was this issue closed?
In the docs I read that there is a focus()
method on the react-select element, wouldn't a complementary blur()
be in order?
from react-select.
The setting autoBlur
helped in my case.
from react-select.
Hey there! maybe it can help for material-ui 1.. user but can work for others too.
I use an Input
and add the React-Select
component in inputComponent
of Input props.
Then add your ref
to your select.
You can now access it with :
this.refs.select.input.input.blur()
( twice input here, cause the first one ref the AutosizeInput
and the second one is the input Element)
Hope it help someone.
from react-select.
+1
This would be very useful.
from react-select.
+1
from react-select.
I wrote 0bfba99 for myself to fix this problem, but it's not configurable nor thoroughly tested. I don't like the copy-paste but it seems to work fine in all cases (multi-select included). I can issue a PR if @JedWatson thinks it's fine.
from react-select.
@jedverity use a ref
?
Then you would just do ref.value.blur()
AFAIK.
See here for more information on ref
.
from react-select.
@dcousens The reason for querySelector
is that putting a ref on <Select />
just returns the div.Select
wrapper, when in fact the <input>
that needs blurring is nested a few generations below.
So I can fork the lib and put a ref on that input and then do React.findDOMNode( myInputRef ).blur()
but if I'm forking the lib (which I've done), I'm just changing the behavior to my specs, having it blur by default.
Let me know if I misunderstood your suggestion!
from react-select.
+1
from react-select.
@glortho It was a long time ago, but it might be helpful for others.
Looks like input is rendered with ref="input",=, If you have your Select with ref="select", you can call this.refs.select.refs.input.blur().
from react-select.
Ability to call blur would be nice.
from react-select.
My workaround:
<input style={{width:"0px",border:"none",padding:"0"}} ref={r=>this.dummyInput=r}/>
then in Select element:
onChange={ev=>{setTimeout(()=>{ if(this.dummyInput) this.dummyInput.focus(); },200);}}
timeout is needed
from react-select.
Coming back to this now because it's still relevant. How do you propose solving this, @JedWatson ?
EDIT: The standard .blur(), .focus() and so forth can found under this.refs.yournamehere.select
.
from react-select.
Related Issues (20)
- W3 validation errors
- MenuPortal placement is off for position='fixed' if a parent has transform: scale
- Cannot select options on iOS with VoiceOver since 5.8.0 HOT 1
- MS Edge 119: text cut in placeholder/selected option HOT 1
- Name property is not defined for option in the animation color dropdown.
- autoComplete overlaps the input field on v5 HOT 1
- <title> OMG HOT 1
- react-select v5.8.0: `Extra attributes from the server: aria-activedescendant` HOT 3
- Async multi select options are reset after selecting an option HOT 2
- Issue with input type="number" on Firefox/Safari HOT 2
- Menu is closing inside tests HOT 4
- Validation works incorrectly for React-select with Formik and yup on mobile device
- JAWS screen reader highlight/focus issue
- Bug: right clicking on a select input when the menu is open makes the input unresponsive
- Inconsistent Behavior With Magnification When Selecting Dropdowns
- Inconsistent Behavior With Magnification When Selecting Dropdowns
- Pressing on Tab key takes me to outside of the form instead of next input. HOT 9
- <withAsyncPaginate: the options menu closes on every option click>
- The issue where the keyboard's down button does not work immediately during Korean input
- Extra Space in Dropdown Menu of React Select Component on Initial Render
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from react-select.