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?

enter image description here

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-input-field field-name="Invoice_Payee_Name__c" required autocomplete="off"></lightning-input-field>

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.

  • Why don't you add your workaround as an answer? That way this question gets an answer and people can vote on it which gives a hint to future people that this works.
    – Nick C
    Sep 20, 2021 at 23:14
  • Will do, this question were closed as duplicate and got opened just recently.
    – Damecek
    Sep 21, 2021 at 10:07

2 Answers 2


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.


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.





 handleChange(event) {
   let fieldName = event.target.dataset.name
  • Can you pls provide some code snippets?
    – Damecek
    Sep 8, 2022 at 8:51
  • updated with example @Damecek , hope it helps. Sep 16, 2022 at 16:10
  • as I thought, in your answer you are using ligntning-input but the question was about lightning-input-field which is different component
    – Damecek
    Sep 16, 2022 at 20:03

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .