7

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">
3
  • 2
    What's stopping you from using regular html input ? Could you add some code to the markup to help reproduce . Jan 12, 2018 at 22:44
  • what's stopping me is the way aura (or maybe lightning) modifies the code. More code added Jan 19, 2018 at 20:38
  • 1
    I use autocomplete="password" instead of off / on as chrome respects it. Chrome typically ignores autocomplete otherwise. Give it a shot and see if it works for you
    – Eric
    Aug 26, 2018 at 3:25

4 Answers 4

4

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.

1
  • 1
    This "answer" is interesting in the context of the question. But as it is related to lightning:input, whereas the question explicitly refers to the HTML input element and the problem for the latter remains, I don't see how this solves it. Or have I missed anything? Sep 15, 2021 at 8:50
4

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.

1
  • 3
    Move this logic into the renderer. Aug 25, 2018 at 17:17
0

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.

0

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");

You must log in to answer this question.

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