Magento 2: Add "autocomplete" attribute to checkout fields

Question

We're running our site on Magento CE2.4.1. Currently, checkout fields have the following attributes:

<input class="input-text" type="text" data-bind="
    value: value,
    valueUpdate: 'keyup',
    hasFocus: focused,
    attr: {
        name: inputName,
        placeholder: placeholder,
        'aria-describedby': getDescriptionId(),
        'aria-required': required,
        'aria-invalid': error() ? true : 'false',
        id: uid,
        disabled: disabled
    }" name="lastname" aria-required="true" aria-invalid="false" id="KR2W89N">

I would like add the autocomplete attribute to each field. Like this:

<input class="input-text" type="text" autocomplete="name" data-bind="[...]" name="lastname" aria-required="true" aria-invalid="false" id="KR2W89N">

I checked the following files to see if there is a way to achieve this:

magento/module-checkout/view/frontend/web/template/shipping-address/form.html
magento/module-checkout/Block/CheckoutLayoutProcessor.php

As for the form.html: I could not figure a way to get the particular autocomplete value as a variable for each field.

As for the CheckoutLayoutProcessor.php: I created a small module with the help of this thread:

How to auto fill the shipping address field in Checkout in Magento 2.2

I was able to e. g. change the LABEL for each field (just as a test). However, I could not find a way to define any other attribute / option for each checkout field.

Am I looking at the right files, anyway? Any help would me much appreciated.

I am not trying to autofill the fields myself. I just want to add the attributes so that browsers autofill the fields correctly. Currently, input of street.0 will also be added to street.1.

If the desired solution is not possible: is there a way to just set autocomplete="off" for only the street.1 field?

Thanks! Alex

Answer 1

I now went for a probably non-elegant solution. In LayoutProcessor.php (please refer to link in initial post) I simply defined a custom template:

'config' => [
                    'customScope' => 'shippingAddress',
                    'template' => 'ui/form/field',
                    'elementTmpl' => 'Vendor_Module/form/element/customtemplate'
                ],

In this custom template I just hardcoded:

autocomplete="off"

This way it would obviously also be possible to set individual values for each field by creating a separate template for each field. Though, this seems a bit too much.

Just in case this might be of help for someone else I will mark this answer as the accepted one for now. Once someone will provide a more professional approach I will be more than happy to change her / his post to the accepted answer.