[AutocompleteInput]: Chrome Address Autofill should be disabled by default

[jtomaszewski]

We have AutocompleteInput defined in such a way:

        <ReferenceInput
          alwaysOn
          label="Owner"
          source="ownerId"
          reference="People"
          filterToQuery={(searchTerm) => ({ searchTerm })}
        >
          <AutocompleteInput
            optionText={ownerRenderer}
          />
        </ReferenceInput>

which now ends up in two autocomplete dropdowns being shown at the same time (one of them being the chrome adress autofill dropdown):

This is because the <input /> has autocomplete="off" when it should be autocomplete="no" (see this for reasoning):

If I change it manually in Chrome dev tools to autocomplete="no", then the issue is resolved.

IMO Native autocomplete should be turned off for such fields by default. (I don't even know how to turn it off myself - passing inputProps={{ autocomplete: "no", autoComplete: "no" }} to AutocompleteInput does nothing.

Environment

• React-admin version: 3.4.10
• Browser: Os X , chrome Version 87.0.4280.67 (Official Build) (x86_64)

[djhi]

Can you try the following?

<AutocompleteInput
    optionText={ownerRenderer}
    options={AutocompleteOptions}
/>

Where AutocompleteOptions is:

const AutocompleteOptions = { InputProps: { autoComplete: 'no' } }

[jtomaszewski]

Yeah, then it works. Thanks @djhi

Although it would still be nice to make it a default. I wanted to submit a PR, but I was hard for me to tell what would be the place to put it.

[etienne-bondot]

I agree, I faced the same and it seems that autoComplete is already an available property, so could we at least use it to set autoComplete: 'no' ?
Regards

[jtomaszewski]

FYI it has to be autoComplete: "off" not autoComplete: "no". The latter doesn't always work.

[jtomaszewski]

Jesus, Chrome is terrible. See https://stackoverflow.com/questions/30053167/autocomplete-off-vs-false .

If it's a AutocompleteInput inside of <Filters, it needs to be autoComplete: "off" .

If it's a AutocompleteInput inside of <SimpleForm, it needs to be autoComplete: "no", .

Seriously.

I think in the simpleform, it treats it as address autocomplete, and chrome forces autocomplete even if the input has autocomplete="off", and so you have to set it to some arbitrary value like no nope.

And in the filters, it uses some different autocomplete mechanism, which you have to simply turn off with the way it should be disabled, using off ( https://developer.mozilla.org/en-US/docs/Web/Security/Securing_your_site/Turning_off_form_autocompletion ).

[fzaninotto]

We can't do that in the AutocompleteInput, so I guess this boils down to documenting the solution. @jtomaszewski would you mind opening a PR for that?

[jtomaszewski]

I'm sure we could provide at least one default, that works in at least some of the cases?

Also, are you sure we can't tell from the AutocompleteInput whether we are in Filters or not? We could tell that for example on the basis whether alwaysOn prop is given.

So we could do the following inside of https://github.com/marmelab/react-admin/blob/master/packages/ra-ui-materialui/src/input/AutocompleteInput.tsx#L525 :

autoComplete={props.alwaysOn ? "off" : "no"}

That would make it work out of the box in:

• inside of SimpleForm
• inside of Filters when alwaysOn prop is given

Which is already better than, work nowhere by default.

WDYT? Would u accept a PR for that? @fzaninotto

[fzaninotto]

I can't reproduce the bug. Could you explain how to reproduce it?

[WiXSL]

@jtomaszewski, could you explain how to reproduce this bug?

[fzaninotto]

No news for some time, closing.