Select text in react-select - reactjs

Question

I'm able to focus a react-select programmatically, but I can't select the text in the input field.
I'm getting a reference to react-select like so:
const selectRef = useRef()
...
<Select
ref={selectRef}
// other props
</Select>
And then:
selectRef.current.focus()
selectRef.current.select()
Select focuses successfully, but for the second line (which I believe should work on an input element) I get:
TypeError: selectRef.current.select is not a function
How do I select text inside the react-select's input field?

Answer 1

react-select, I believe, handles this focus programmatically. The ref.current is not the search input.
We can achieve the expected behaviour using the same HTMLInputElement's select() method, however.
react-select provides a prop inputId whose value is attached directly to the input as an Id. onFocus we can select it.
import React, {Component} from "react";
import Select from "react-select";
function SingleSelect() {
const selectRef = useRef(null);
function handleButtonClick() {
selectRef.current.focus();
}
function handleFocus() {
document.querySelector("#select-input").select();
};
return (
<>
<Select
inputId = "select-input"
ref={selectRef}
onFocus = {handleFocus}
options = {[
{value: "1", label: "one"},
{value: "2", label: "two"},
]}
defaultInputValue = "some random string"
/>
<button onClick={handleButtonClick}>Focus!</button>
</>
);
}
Here is working example of the same code.
I hope this is what you wanted. Thanks :)

Answer 2

Just a couple of changes -:
<Select
ref={(n) => this.selectRef = n}
// other props
</Select>
And we can access the inputValue like this --> this.selectRef.select.props.inputValue
Working Fiddle -> https://stackblitz.com/edit/react-43utra

Answer 3

The reason your code doesn't work is because the ref to the Select component is not the same as the innerRef to the input. You would access it instead via the following object chain...
selectRef -> current (StateManager) -> select(Select Component) -> inputRef (Input Component)
selectRef.current.select.inputRef.select()