I'm facing strange bug. I'm trying to focus my input element when i click on button but that doesn't focus my input.
I've tried to use react hook useRef and then use it in my inputRef.
const inputRef = useRef<HTMLInputElement>(null);
<InputBase
inputRef={inputRef}
value={search}
placeholder="Search"
onChange={onSearch}
onKeyPress={onSearchQuery}
/>
<Button
variant="text"
onClick={() => {
inputRef.current?.focus();
onOpen();
}}
>
Focus my input
</Button>
Use React.createRef()
class MyClass extends React.Component {
constructor(props) {
super(props);
// create a ref to store the textInput DOM element
this.textInput = React.createRef();
this.focus = this.focus.bind(this);
}
focus() {
// Explicitly focus the text input using the raw DOM API
// Note: we're accessing "current" to get the DOM node
this.textInput.current.focus();
}
render() {
// tell React that we want to associate the <input> ref
// with the `textInput` that we created in the constructor
return (
<div>
<InputBase
ref={this.textInput}
value={search}
placeholder="Search"
onChange={onSearch}
onKeyPress={onSearchQuery}
/>
<Button variant="text" onClick={this.focus} >
Focus my input
</Button>
</div>
);
}
}