How to set autocomplete="off" in lightning form

Question

The Problem

I am trying to set the HTML attribute auto-complete="off" on an input element with the class slds-input. For some reason the template always converts this to autocomplete="true" in rendering.

I have created a custom search field to search for sObjects, and so the browser autocomplete behavior is obviously unhelpful, and if this were regular html I could just include the autocomplete attribute with the value off, but aura doesn't seem to let me.

One answer I found suggested using html-autocomplete="off", so I also tried that, and when I do that the attribute simply isn't rendered at all.

What I've tried

• I tried including autocomplete="off" and html-autocomplete="off" in the input tag
• I tried including autocomplette="off" and html-autocomplete="off" in the form tag surrounding the input tag
• I tried adjusting the aria-autocomplete value (that did nothing, not that I really expected it to, but I wanted to at least try).
• In this PDF of the aura docs the html attribute autocomplete is not mentioned.
• I've found a list of supported HTML tags in aura, but no list of supported attributes
• I can't find anything about this behavior in the lightning docs, and it's very difficult to google for because of the autocomplete lightning/aura element

Is there any way to do this? Or documentation about this behavior?

Code sample:

This:

<aura:component>
    <input type="text" autocomplete="off" />
</aura:component>

will come out in the final HTML as this:

<input type="text" autocomplete="true" data-aura-rendered-by="5:0">

Answer 1

Possible as of Spring 19. See here

autocomplete—Controls autofilling of the field. This attribute is supported for email, search, tel, text, and url input types. The values on and off are supported, but the autofill behavior depends on the browser. When you set the autocomplete attribute, the lightning:input component passes the value through to be interpreted by the browser.

Answer 2

I just spoke with support at Salesforce and apparently this is currently impossible.

(I am leaving my answer here not as the accepted answer because I want someone to find this question when there is a better option and answer it and I will mark them as accepted.)

---

Workaround:

However, I am using the following hack workaround:

I gave my element an id, and execute this JS:

turnOffAutocomplete : function(component) {
    var input = document.getElementById("id-of-the-input");
    if(input.getAttribute("autocomplete") !== "off"){
        input.setAttribute("autocomplete","off");
    }
}

I'm executing it not in init (because that executes before the elements have rendered) but instead the when the input element is focused.

Any comments to improve this (so it doesn't have to execute every time the input is focused, for instance) would be appreciated.

Answer 3

The only solution I found was to use a textArea with rows="1"

<textarea type="text" class="slds-input" rows="1" id="combobox-unique-id" style="resize : none;" />

You can add some slds classes to have same display as a normal input.

Answer 4

You can try this it's worked for me through using the aura:id and then set 'autocomplete' off. You can use in the init method of the lighting controller

component.find("fieldSelect").set("v.autocomplete","off");