function readOnly(count){ }
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
+ Start a Discussion
ajithMajithM 

How to enable Force:inputField ?

Hi, 
I am trying to build a component int Aura lightning framework and I found out that there is a know issue with "force:inputField" tag. force:inputfiled tag for picklist values is disabled by default and I saw some work around to activate it by removing attribute "disabled", but for some reason my not able to achieve it. Need your help to find out  the issue.  here is my Code. 
**************

test.cmp code: 

<div class="form-group">
              
                <div id="contact_Type" class="col-sm-10">
                    <force:inputField aura:id="contactType" value="{!v.contact.Contact_Type__c}" />
               </div>
           </div>

testController.js : 
({
    init : function(component, event, helper) {
        
              
 
        console.log(' in init : ');
        
    },
    
    newContact : function(component, event,helper){
        
        console.log("in newcontact");
        
        var contact = component.get("v.contact");
        var contactType = component.find("contactType");
        
        contact["Contact_Type__c"] = contactType.get("v.value") ;
        
        console.log("contact firstname : "+contact["firstName"]);
        console.log("contact Type "+ contact["Contact_Type__c"]);
        
        helper.insertContact(component, contact);
        
    }
    
    
})


TestRenderer.js


({
    // Your renderer method overrides go here
    // 
    render : function(cmp){
        
         var ret = this.superRender();
        
         var element = cmp.find("contactType");
        
        
        var contactType = element.getElement();
        
        console.log('contactType has disabled attr ?  '+  contactType.hasAttribute("disabled"));
        
         contactType.removeAttribute("disabled");
       
        return ret; 
    }
})



In the browser console contactType.hasAttribute('disabled'); is comming up as False. So contactType (element) doesnot have that attribute at the time of render. I think the issue is with the order of running "render()" and actual compnent rendering. 
 
Best Answer chosen by ajithM
scottbcovertscottbcovert
Hi ajithM,

If you log the value of the contactType variable to the console from your render function you'll see that the element actually has two children, the first being the HTML select tag and the second being the HTML label tag. You're trying to remove the disabled attribute from the contactType variable directly but you really want to remove it from the HTML select tag so try replacing that line with this:
 
contactType.children[0].removeAttribute('disabled');

All Answers

scottbcovertscottbcovert
Hi ajithM,

If you log the value of the contactType variable to the console from your render function you'll see that the element actually has two children, the first being the HTML select tag and the second being the HTML label tag. You're trying to remove the disabled attribute from the contactType variable directly but you really want to remove it from the HTML select tag so try replacing that line with this:
 
contactType.children[0].removeAttribute('disabled');
This was selected as the best answer
ajithMajithM
Worked perfectly.. Thank you. 
scottbcovertscottbcovert
Great, glad I could help!
Douglas C. AyersDouglas C. Ayers
This is known issue, https://success.salesforce.com/issues_view?id=a1p3A0000001BaTQAU. Tentatively scheduled to be fixed Spring '17