5

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">
  • 2
    What's stopping you from using regular html input ? Could you add some code to the markup to help reproduce . – Mohith Shrivastava Jan 12 '18 at 22:44
  • what's stopping me is the way aura (or maybe lightning) modifies the code. More code added – Nathan Hinchey Jan 19 '18 at 20:38
  • 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 '18 at 3:25
3

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.

3

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.

  • 2
    Move this logic into the renderer. – itzmukeshy7 Aug 25 '18 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");

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.