Comments (8)
That should work:
<Select ref={(ref) => { if (ref) { ref.focus(); } } } />
Are you sure some other component isn't grabbing the focus?
from react-select-plus.
Yes, I am pretty sure that no other component grabs the focus.
What I am trying to do, is to force the drop down menu to open, when clicking a selection in mulit-select setup. Normally, the drop-down menu will open when a selection bubble is clicked, but I am employing the onValueClick
attribute to perform some additional actions and as a consequence the menu stopped appearing out when a bubble is clicked.
valueClick(value) {
// Additional actions
},
render () {
return (
<div className="section">
<Select
multi={this.state.multi}
options={options}
value={value}
onValueClick={this.valueClick}
/>
</div>
);
}
from react-select-plus.
I see. And does this happen even if your valueClick()
method is empty, or is something in that method responsible?
from react-select-plus.
Yes, it happens with whichever body the method has, even if the method has no body at all. I suppose, the onValueClick
property was built to route users who click a selection, to another page; its tag, besides, whenever populated, is displayed as a <a>
-the equivalent of a link. I, however, use it as an alternative way of creating an event listener.
Specifically, I need to capture the entire value of the selected bubble (which, in my case contains additional data such as label, level etc) and update the result list of the select accordingly. I currently hold 3 different lists of results, and depending on which select bubbled was clicked, I will display the corresponding list.
So, I am afraid that building a common event listener on this item's clicks, would not pass the complete value
object but the displayed value instead. Rather, I need to use the onValueClick
property but not lose the functionality of re-opening the drop-down menu.
from react-select-plus.
Ah, yes, setting that prop (passed through to the Value
component as onClick
) prevents the mousedown
event from propagating, so the surrounding component never receives it. Storing a ref to the Select
and calling ref.focus()
in the valueOnClick
should work in principle. But you say you've tried that without success? Have you tried calling it after a timeout (setTimeout(() => { ref.focus(); }, 0)
)?
Since this behavior is consistent with the upstream react-select project, it's a #wontfix on our end.
from react-select-plus.
Yes, I have tried manually calling focus()
method but with no luck. I feel though that I am using it wrong:
valueClick(value) {
this.selection.focus();
},
render () {
return (
<div className="section">
<Select
multi={this.state.multi}
ref={(input) => { this.selection = input; }}
options={options}
value={value}
onValueClick={this.valueClick}
/>
</div>
);
}
from react-select-plus.
Looks like it's a timing issue, which you can see simply replicated here: https://codepen.io/TrevorBurnham/pen/LQjjrb Focusing an element during a mousedown
event (as when your valueClick()
is invoked) doesn't do anything. You can see that wrapping the focus()
call in even a 0ms timeout fixes the problem: https://codepen.io/TrevorBurnham/pen/oEeeMB
from react-select-plus.
Yes, that was it. Thank you so much for your time!
from react-select-plus.
Related Issues (20)
- Possible to select groups? HOT 1
- Custom options for Group HOT 3
- Please update to react-select 1.2.0 HOT 2
- OptionGroup throws errors when setting dragging property
- Async multi-select sometimes hides the menu incorrectly after selecting a value HOT 1
- Option Groups are not searchable
- Remove Selected not working
- Non-clearable Selects can be cleared (with backspace) HOT 1
- Cannot select menu items on mobile
- Huge problem with infinite loop options into group. HOT 1
- Remove Selected Disables Options
- Search input clears on selection
- Not work with react-datepicker HOT 1
- delete key is not affecting input text
- No supports for react 16+ HOT 4
- possible to trigger onChange event from outside of component ??
- TypeError: Cannot read property 'string' of undefined HOT 3
- If I use the cdn links to import react-select-plus, Then how to use CreatableSelect? Its not working by importing.
- Trying to get in touch regarding a security issue HOT 1
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-plus.