2

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

},

  • Looks like your username and password fields have a Keyup attribute bound to it. Why dont you try removing those keyup events keyup="{!c.onKeyUp}" , maybe they are giving you the auto-completes. If that is not the case .. we request you to share all the components so that we can take a look. – StormBr34ker Jun 20 '17 at 9:24
  • @Sumuga please see my edits – Ant Jun 20 '17 at 11:56
  • The methods that you have mentioned, contains only 1 method handleLogin. It looks like you are referring other methods like "onKeyUp" as well. Could you search for those methods ? – StormBr34ker Jun 20 '17 at 12:16
  • @Sumuga I added the onKeyUp – Ant Jun 20 '17 at 12:40
  • Looks like Your keyUp is looking for an Enter to handle the login. But these methods dont have the auto-complete logic. By "Auto-complete" what do you mean it is something like you type "Acce" and it comeplete something as "Accept" or is it like the remember username password in browsers ? – StormBr34ker Jun 20 '17 at 12:50
2

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');
}
  • I am pretty new to this and dont completely understand what you mean with the second option. Could you maybe explain it in dummy language? Thanks – Ant Jun 22 '17 at 16:07
  • Edited. Let me know if that helps. – wellmstein Jun 23 '17 at 14:02

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.