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)
- worst thing ever see in my life HOT 2
- Types broken in `React@19` & `Next@15` HOT 4
- CreatableSelect missing all classes HOT 1
- Page crashed in Edge browser with translation
- Clicking outside of the menu does not close a controlled menu
- Unable to select color using voice access commands.
- Async Select Multi: Options Cleared After Selection Despite Persistent Search Term
- how to get the value from select component in a form based on id
- Tooltip not working
- AsyncCreatableSelect not allowing to enter more than character to search or create
- defaultValue text gets truncated with elipsis (...) at the end HOT 1
- how to avoid this select expand while selecting multiple options
- Unexpected behaviour in combination with `react-hook-form` HOT 1
- Select not scrolling to Selected Item when menuPortalTarget={document.body}
- Incorrect user of <label for=FORM_ELEMENT>
- Pressing enter on a button in a custom option component consumes the event before it reaches the custom button. HOT 1
- Tabindex not working HOT 2
- The dropdown does not open in createable select when the search input and the options label do not match
- Clicking on an item using Custom Menu scrolls to top HOT 1
- Styles not Loading in Remix HOT 5
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.