lwc input-field autocomplete="off"

Question

I know that on lightning-input you can set autocomplete="off" to deactivate browser autofill feature. Now I am looking for something similar to this on lightning-input-field.

Has anyone found any workaround for this? Do I really have to rewrite all with lightning-input?

Currently i am using record-edit-form with input-field.

<div slot="modalContent" class="modalContent slds-modal__content slds-p-around_medium">
    <lightning-record-edit-form object-api-name="ImpartnerMDF__FundsClaim__c" onsuccess={handleSuccess}>
        <lightning-messages></lightning-messages>
        <lightning-input-field field-name="Invoice_Payee_Name__c" required autocomplete="off"></lightning-input-field>
    </lightning-record-edit-form>
</div>

I know about this post that seems to be related, but there are discussing aura component aura:input which really is not what I am using here, lwc component lightning-input-field. As far as I know the autocomplete attribute needs to be set on the html input tag, and from lwc shadow DOM perspective we are not able to dynamically query for this element via js.

I was thinking that maybe load js as static resources could bypass shadow DOM? -> Nope, even externally loaded script could not cross the shadow dom boundary for me.

Another approach I was thinking about would be to use lightning-input just for input, then have lightning-input-field with display: none; to which via js I will force the values.

Answer 1

Never mind, the last guess was the most successful. Use lightnig-input with autocomplete="off", hide the input-field. Via onchange event, set the value from lightning-input to input-field.

Only bad thing on this solution is that you will lose the validation messages on the input-field which is hidden. But there is a workaround for this as well, something like displaying custom error messages.

Answer 2

There are two types of autocomplete in lightning fields -

1- Cache suggestions - Use property autocomplete="off" in your input component to prevent these suggestions.

2- Browser autofill - Remove the "name" property of the input field to restrict the identification by the browser form. Use custom dataset property for name : data-name="Email" in place of name="Email". to access it in the change event use - const fieldName = event.target.dataset.name;. The browser autofill algorithm looks for the matching name fields to give autocomplete suggestions.

Unfortunately, there is no provision from Salesforce to stop this. However, this workaround will resolve the issue.

ex-

HTML:

<lightning-input
    label="Email"
    type="email"
    value={record.Email}
    onchange={handleChange}
    data-name="Email"
    autocomplete="off">
</lightning-input>

JS:

 handleChange(event) {
   let fieldName = event.target.dataset.name
 }