[pickers] Bug with the autoComplete HTML attribute

[Paul6552]

Steps to reproduce

I have a registration page where the user can fill out the standard fields like "Firstname, Lastname, Birthday ..."

With Firstname, Lastname, Telephone, Email ... the autocomplete property is working fine. To clarify a bit more:
I do NOT speak about the mui autocomplete component. I speak about the HTML attribute: autocomplete for the browser -> Click me

On the http-link above you can find the html attribute: "bday":
"bday"
A birth date, as a full date.

I tried setting the autocomplete attribute at the datePicker component, but no browser does recognize this attribute. My Code:

<DatePicker
    disableFuture
    minDate={dayjs("1900-01-01")}
    slotProps={{
        textField: {
            fullWidth: true,
            autoComplete: "bday"
        },
    }}
    label="Date of birth"
    defaultValue={dayjs(user.geburtsdatum)}
    onChange={(dateJS ) => {
        //Do something
    }}
/>

A working example with another component is Textfield:

<TextField
    id="firstname"
    autoComplete="given-name"
    fullWidth={true}
    label="First name"
    value={user.vorname}
    onChange={( event ) => {
        //do something
    }}
/>

This code above is working and the browser does fill out automatically the first name.

Current behavior

No browser does fill out the birthday automatically

Expected behavior

Every browser should fill out the birthday if some contact details are saved in the browser.

Context

No response

Your environment

Tested with Chrome, Firefox and Edge browser
Mui latest version

Search keywords: datepicker html attribute "autocomplete" not working

Search keywords:

[michelengelen]

Hey @Paul6552 ... you can actually set the atttribute the way you did it, or by using the inputProps:

<DatePicker
  label="Basic date picker"
  slotProps={{
    textField: {
      inputProps: {
        autoComplete: 'bday',
      },
    },
  }}
/>

It just has not the desired effect. @LukasTy do we support that in some way?

[LukasTy]

@Paul6552 Thank you for creating this issue! 🙏
@michelengelen given the custom implementation of the Field component, that's not something that we looked into during the testing.
I believe that it should be doable with both the v6 approach as well as the new multi-HTML input.

[Paul6552]

I searched for the "new multi-HTML" input on the mui documentation website but couldn`t find any information about that.
And what is the v6 approach? Can it be adjusted somehow?

[flaviendelangle]

In the new major version, we are going to introduce a new DOM structure that is a lot more compatible with the ARIA recommendations for accessibility.
You can have a look at the differences here

If we want to support the autoComplete, we need to make sure to take this new structure into account 👍

[Paul6552]

I tried with version 7 and enableAccessibleFieldDOMStructure, but nothing changed. What I tried:

enableAccessibleFieldDOMStructure
slotProps={{
    textField: {
        fullWidth: true,
        autoComplete: "bday"
    },
    // @ts-ignore
    field: { autoComplete: "bday" }
}}

[LukasTy]

@Paul6552 I can confirm that indeed the autoComplete prop is currently ignored on both Pickers regardless of enableAccessibleFieldDOMStructure prop usage.

I've fixed the prop propagation and tried testing the autofill behavior, but either I'm not aware of something or it doesn't work on date inputs.

I couldn't make the autoComplete: 'bday' work on any of the following: Pickers, <input type="date" /> and plain TextField.

Maybe you have a reproduction example that you can test this (use https://pkg.csb.dev/mui/mui-x/commit/42b78da9/@mui/x-date-pickers instead of your currently specified @mui/x-date-pickers version) bundle in?

Or do you have any tips on how to force the bday autocomplete?

[Paul6552]

Or do you have any tips on how to force the bday autocomplete?
No idea how to force autofill, but in IOS you can go to settings - safari - autofill.

Sadly, Chromium does not support "bday" as autofill, therefore it would only be working for IOS users.

I can test this, but it would just take some time because I don't have an IOS device myself and I only tried it out with a friend's iPhone.

[LukasTy]

@Paul6552 I've tested both v6 and v7 behaviors on an iOS simulator.
They do not work even after my changes. 🙈
Whereas <input type="date" /> or a regular input element works.

We'll need to spend a bit more time on this to come up with a solution, which would work.
If native date input works—there should be a way to "tie the dots together". 🤞

We'll get back to it after grooming and prioritizing it. 😉

P.S. To even test it you have to use Desktop Picker, because Mobile variants are readonly and ignored by iOS autofill.
So, technically, for proper implementation, #7869 is a prerequisite for this issue.