I am struggling to create a search match list that updates as the user types in their query. However, I am facing an issue where the input element loses focus to the pop-up. I have attempted to programmatically set the focus using refs, but I am unable to assign a ref to a stateless function component (such as my TextField input).
Here is a demonstration of the problem: https://i.sstatic.net/aWmRL.jpg
You can see in the gif how the pop-up takes focus and hinders further typing by the user.
<TextField
id='contact'
label='Contact Name'
className={classes.textField}
margin='normal'
ref={this.nameInput}
onChange={this.handleContactSearch.bind(this)}
value={this.state.contactSearch}
/>
<Popover
open={Boolean(anchorEl)}
anchorEl={anchorEl}
onClick={this.handlePopoverClose}
anchorOrigin={{
vertical: 'bottom',
horizontal: 'center'
}}
transformOrigin={{
vertical: 'top',
horizontal: 'center'
}}
autoFocus={false}
>
<List>{this.createContactList()}</List>
</Popover>
Below are the relevant functions:
handleContactSearch(event) {
this.handlePopoverClick(event);
this.setState({ contactSearch: handleText(event) });
this.props.filterContacts(
event.target.value,
this.props.accountInfo.AccountName
);
}
handlePopoverClick = event => {
this.setState({
anchorEl: event.currentTarget
});
};
handlePopoverClose = () => {
this.setState({
anchorEl: null
});
};
How can I ensure that the TextField element retains focus so that the user can input their query uninterrupted?
Sandbox: https://codesandbox.io/s/mjqoj9lxkj