How can I fix react input type auto suggestion feature in chrome browser

Question

I am using google chrome71, and here in input tag, Autocomplete/autosuggestion where the browser does automatically fill the input field is not working in react +HTML.

I have added form tag outside but didn't found any luck to get the autocomplete suggestion.

<form>
<label style={{ display:'none' }} htmlFor='mobile'>Name</label>
  <input className=''
     type='text' placeholder='Mobile number' autoComplete='tel'
     value={props.mobilenumber} name='mobile' id='mobile'
     onChange= {props.actionHandler} />
</form>

Here I expect to autocomplete of number, which I used earlier... Appreciate.

Possible duplicate of [How to trigger Autofill in Google Chrome?](https://stackoverflow.com/questions/7223168/how-to-trigger-autofill-in-google-chrome) — Arnaud Christ, Jan 31 '19 at 12:10
I have added a label here as mentioned but still same issue. — Anupam Maurya, Jan 31 '19 at 12:15

score 0 · Answer 1 · answered Jan 31 '19 at 12:19

0

From the possible duplicate link provided in comment:

For phone:

Use any of these for name: phone mobile country-code area-code exchange suffix ext
Use any of these for autocomplete: tel

answered Jan 31 '19 at 12:19

Arnaud Christ

3,440
3
24
33

Thanks for the valuable time and reply... but this doesn't work for me. – Anupam Maurya Jan 31 '19 at 12:34
Can you provide us with an extract of the generated DOM ? – Arnaud Christ Jan 31 '19 at 13:25
the issue is closed with, empty input element, I have passed id event here, and it triggers auto-suggestion now. – Anupam Maurya Feb 01 '19 at 12:14

score 0 · Answer 2 · answered Feb 01 '19 at 12:10

Here is working JSX code,

<iframe style={{ display:'none' }} name='form_name' src='login:blank' />
<form onSubmit={actionName} className='col-sm-12 pad0' target='form_name' action='login:blank'>
    <input className=''
        type='text' placeholder='Mobile number' autoComplete='tel'
        value={props.mobilenumber} name='mobile' id='mobile'
        onChange= {props.actionHandler} />
    <input type='submit' style={{ display:'none' }} id='inputSubmit' />
</form>

 <div className=''>
    <button buttonText='Submit'
        onClick={
        () => {
            document.getElementById('inputSubmit').click()
        }
        } />
</div>

How can I fix react input type auto suggestion feature in chrome browser

2 Answers2