How do I disable autocomplete

Question

How do I disable the autocomplete in my lightning components. I want the ui:inputText and ui:inputSecret not to autocomplete the fields. But I am struggling in doing this.

Here is the code:

<div class="slds-form" >
<div class="slds-form-element inputwidth slds-m-vertical--medium"  
        <div class="slds-p-top--medium" >       
            <div class="sfdc slds-has-divider--bottom">

                <ui:inputText  value="" aura:id="username" keyup="{!c.onKeyUp}" class="input border sfdc_usernameinput sfdc" label="{!v.usernameLabel}" />
            </div>
            <div class="sfdc">
                <div class="slds-form-element inputwidth slds-m-vertical--medium">
                    <div class="slds-form-element__control" >
                        <label><p>Password</p></label>
                        <div class="slds-grid slds-has-divider--bottom slds-theme--default">
                            <ui:inputSecret value="{!v.password}" aura:id="inputPasswordSecret" keyup="{!c.onKeyUp}" class="border input sfdc_passwordinput slds-show sfdc" />
                            <ui:inputText value="{!v.password}" aura:id="inputPasswordText" keyup="{!c.onKeyUp}" class="border input sfdc_passwordinput slds-hide sfdc"  />
                            <a href="javascript:void(0);" onmousedown="{!c.togglePassword}" onmouseup="{!c.togglePassword}">
                                <lightning:icon iconName="utility:preview" size="small" class="slds-m-horizontal--x-small"/>
                            </a>
                        </div>
                    </div>
                </div>
            </div>
            <div class="slds-grid slds-p-top--xx-large">
                <div class="slds-col slds-p-top--small">
                    <p class="slds-text-align--left">
                        <div>
                            <button class= "slds-button pressed" onclick="{!c.onClickStep2}">
                                Forgot your password?
                            </button>     
                        </div> 
                    </p>
                </div>
                <div class="slds-col">
                    <div class="slds-text-align--right">
                        <lightning:button label="{!v.loginButtonLabel}" variant="brand"  class="sfdc_button" onclick="{!c.handleLogin}" />
                    </div>
                </div>
            </div>
        </div>
    </aura:renderIf>
</div>

This is the action in the controller:

 handleLogin: function (component, event, helper) {
    helper.handleLogin(component, event, helper);
},

 onKeyUp: function(component, event, helper){

    if (event.getParam('keyCode')===13) {
        helper.handleLogin(component, event, helper);
    }
},

this is the action after in the helper:

handleLogin: function (component, event, helper) {
var username = component.find("username").get("v.value");
var password = component.find("inputPasswordSecret").get("v.value");
var action = component.get("c.login");
var startUrl = component.get("v.startUrl");
console.log(username);
console.log(password);
startUrl = decodeURIComponent(startUrl);

action.setParams({username:username, password:password, startUrl:startUrl});
action.setCallback(this, function(a){
    var rtnValue = a.getReturnValue();
    if (rtnValue !== null) {
        component.set("v.errorMessage",rtnValue);
        component.set("v.showError",true);
    }
});
$A.enqueueAction(action);

},

Answer 1

Try including your inputs inside of a

<form autocomplete="off" > .... </form>

Another alternative would be to use javascript in the afterRender/rerender methods to add the autocomplete attribute

component.cmp

 <ui:inputText aura:id="anInput" ...otherparams />

Render.js

afterRender: function(cmp, helper){
    this.superAfterRender();
    //your component will now be rendered and you'll be able to access the input via javascript and set attributes that are not supported by the ui:inputX

    //this will give you the html described here: 
    https://developer.salesforce.com/docs/atlas.en-us.lightning.meta/lightning/aura_compref_ui_inputText.htm
    var theinputdiv = cmp.find('anInput').getElement();

    //next we want to get input element which is a child
    var theInputItself = theInputDiv.childNodes[1];
    //and now turn off autocomplete
    theInputItself.setAttribute('autocomplete', 'off');

    //more concisely -cmp.find('anInput').getElement().childNodes[1].setAttribute('autocomplete', 'off');
}