Force drop-down menu to open

[Lefteris008]

Hello,

What's the procedure of calling focus() function? I have tried referencing the component via ref attribute but I had no luck in succeeding.

[TrevorBurnham]

That should work:

<Select ref={(ref) => { if (ref) { ref.focus(); } } } />

Are you sure some other component isn't grabbing the focus?

[Lefteris008]

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>	
    );
}

[TrevorBurnham]

I see. And does this happen even if your valueClick() method is empty, or is something in that method responsible?

[Lefteris008]

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.

[TrevorBurnham]

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.

[Lefteris008]

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>		
);
}

[TrevorBurnham]

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

[Lefteris008]

Yes, that was it. Thank you so much for your time!