[Autocomplete] Document how to disable chrome autofill

[goleary]

including the recommendation from #18556 in the docs.

• I have followed (at least) the PR section of the contributing guide.

Closes #18556

[mui-pr-bot]

No bundle size changes comparing e5b2e22...e1e2485

Generated by 🚫 dangerJS against e1e2485

[oliviertassinari]

Is this the only approach that worked for you? I'm particularly interested in the new-password approach as well as the fixed id, that doesn't indicate the nature of the field, e.g. id="flower".

[goleary]

I'm now realizing that my struggles with autofill stem from the fact that I was using an older version of the Autocomplete component. After updating from 4.0.0-alpha.32 to 4.0.0-alpha.39 I'm no longer having this issue on Chrome 79.0.3945.88

It looks like replacing the autocomplete attribute of the input element with off instead of disabled did the trick.

I wonder if chrome made an update on their end to fix the prior behavior because this doesn't explain some of the behavior mentioned in #18556 (although I can't find anything in the release notes).

I'm now using the component as such:

<Autocomplete
  multiple
  id="tags-standard"
  autoHighlight={true}
  options={friends}
  getOptionLabel={formatSplitwiseName}
  onChange={handleAutocomplete}
  value={splitWith}
  className={classes.formControl}
  renderInput={params => (
    <TextField
      {...params}
      variant="standard"
      label="With you and:"
      margin="normal"
      fullWidth
    />
  )}
/>

[oliviertassinari]

@goleary So it wasn't the autofill but the autocomplete feature of Chrome you were having an issue with. In this case, we can't take what you have experienced into account. You can find a close issue in the history the described it, and that we have fixed in the latest version.

I think that that we should go with #18556 (comment), and likely describe what "autofill" refers to. Would that work for you? :)

[goleary]

I'm not sure I understand the distinction between "autofill" and "autocomplete".
In the link below it mentions the value of the autocomplete attribute having a bearing on the effect of the "autofill" functionality in chrome.
https://stackoverflow.com/a/30081850/5186877

Also when I look in chrome settings I see this:

None of these three options above seems responsible for the functionality that interferes with my material-ui Autocomplete component.

Also because I haven't used the method you mention (autoComplete: 'new-password), I don't think I'm the right person to sign off on this.

When I pass no autoComplete prop the component behaves as I expect (with no interference from Chrome).

I don't have a problem with your addition to the documentation but I think the PR should come from someone that understands why and what they are doing and that's not me :(

[oliviertassinari]

• autocomplete: it remembers what you have typed in the field, it's specific to a single textbox. https://twitter.com/g0leary/status/1214685668141494272/photo/1
• autofill: it remembers what you have typed and saved, it's specific to a form type (login, payment, address)

@goleary I think that you are in a good position to make the changes, you are facing the autofill/autocomplete problem that many others will also be unfamiliar with. I think that we could give a shot to this limitation, explaining what we know (I did test the proposed fixes) and iterate, based on it.

[oliviertassinari]

@goleary I would love to get your feedback on the proposed alternative wording. I have used your feedback to tailor it, so thanks for it.

[goleary]

Your suggestion looks good to me, I'll be away from my computer till Monday so can't do anything else till then.

[oliviertassinari]

Thanks for having a look :)