[AutoComplete] Ability to Set Props on the Input Field

[joncursi]

Problem description

The AutoComplete component does not expose an API / prop for setting a ref, class, id, or other unique identifier on the input element within it. This prevents the ability to call focus() programmatically on that input element from an action elsewhere in the app.

An example would be clicking a "search" button that then launches an AutoComplete component with focus programmatically placed on the input:

This would allow the user to only have to click once to start searching, rather than twice (the second time having to be on the input element itself).

Are there any workarounds for this?

[joncursi]

Here's one possible workaround I guess:

<AutoComplete
  ...
  className="search-bar__auto-complete"
  searchText={this.state.searchString}
  ...
/>

    setTimeout(() => {
      document.querySelector('.search-bar__auto-complete input').focus();
    }, 100);

It seems that a setTimeout is needed when searchText is being fed a value from state, as it takes a split second to compute and render.

[joncursi]

Another issue I'm running into is since we cannot set props on input, I cannot set type="search" to enable a custom keyboard such as:

[LeeKevin]

Focus can be done on the AutoComplete field by using the focus() method.

componentDidUpdate() {
    this.refs.autocomplete.focus()
}
render () {
    return <AutoComplete ref="autocomplete" dataSource=... />
}

[LeeKevin]

This issue is related to #4556

[joncursi]

@LeeKevin neat. But what if you need to focus the AutoComplete input from a different component (do not have access to this.refs)?

[LeeKevin]

If you set a refs name for the parent component, you can access it with this.refs.autocompleteParent.refs.autocomplete.focus(). You have access to all the same class properties and methods. Alternatively, you can check a set property flag in order to manually focus as in my previous comment. If you post your code, I can help you find cleaner solution to focus on render/update instead of using a timeout.

[oliviertassinari]

Closed by #4783