React-autosuggest: autofocus support?

[spinus]

Hi, how I can add autofocus to input field?

I've tried something like:

 <Autosuggest                                                          
              inputAttributes={{                                                  
               value: this.state.query || '',                                    
               autofocus: true,                                                  
               placeholder: this.props.placeholder}}                              
               suggestions={this.props.on_get_suggestions}/> 

but does not work.

[moroshko]

Have a look how it's done in examples. This works:

<Autosuggest suggestions={getSuggestions}
             inputAttributes={{ id: 'yourInputId' }}
             ref={ () => { document.getElementById('yourInputId').focus(); } } />

You can also try this approach:

<Autosuggest suggestions={getSuggestions}
             ref="autosuggest"
             ref={ () => { React.findDOMNode(this.refs.autosuggest.refs.input).focus(); } } />

Also, when you tried the autofocus="true" approach, did you put the <Autosuggest> inside a <form>?

[jstejada]

@spinus I believe that React supports autofocus as autoFocus , i.e. camelized: https://facebook.github.io/react/docs/tags-and-attributes.html#html-attributes

Maybe that is your issue?

[spinus]

@moroshko I didn't put tag inside form, I wasn't doing a form, I'll try this anyway.
Thank you for example, I missed that.

@jstejada I'll try today and report.

[moroshko]

@spinus Any luck?

[spinus]

@moroshko: Sorry I forgot to report!
@moroshko, @jstejada inputAttributes={{autoFocus:true}} works like a charm. Thank you! (No form tag required)
@moroshko I didn't try other stuff because I like this simple one :-)

So I think this issue can be closed. Maybe worth to add this example to docs.

[nickbouton]

@moroshko Using the 2.0 branch right now, autoFocus: true in inputAttributes is not working for me -- it's not being passed through to the child input. Other attributes like required and placeholder are passed through correctly, oddly enough. Maybe something to do with the necessary camel-casing of autoFocus not being respected?

[denisnazarov]

autoFocus: true should go into inputProps:

<Autosuggest inputProps={{autoFocus: true}} />