My assumption was that if any component data is changed, that the component will rerender, I want to change the type of the input field and have it rerender, but it's not doing that!

<aura:attribute name="lightningInputType" type="String" default="text"/>
<lightning:layoutItem size="2" padding="10">
    <lightning:input aura:id="selectValue" required="true" label="Value" type="{!v.lightningInputType}" />

my controller function:

fieldSelected: function (cmp, event, helper) {               
    var displayToInputFieldMap = {
        DATE: "date",
        DATETIME: "datetime-local",
        INTEGER: "number",
        DOUBLE: "number",
        CURRENCY: "number", // --> handle these specially with formatter
        PERCENT: "number", // --> handle these specially with formatter
        STRING: "text", 
        REFERENCE: "text",
        ID: "text",
        PHONE: "tel",
        BOOLEAN: "text", // --> handle with a checkbox button
        EMAIL: "email",
        TEXTAREA: "text",
        PICKLIST: "text", // ASK PM
        MULTIPICKLIST: "text", // ASK PM
        DEFAULT: "text"
    var lightningInputType = displayToInputFieldMap[fieldType];

    cmp.set("v.lightningInputType", lightningInputType);

The documentation doesn't say it outright, but it appears that lightning:input renders during its initial init method, which means that the attribute has to already be set by then. You need to rerender the element to get it to accept a new type:

<aura:application extends="force:slds">
    <aura:attribute name="inputType" type="String" default="number" />
    <aura:attribute name="value" type="Object" />
    <aura:attribute name="rendered" type="Boolean" default="true" />
    <aura:attribute name="options" type="String[]" default="[{label:'Text',value:'text'},{'label':'Date',value:'date'},{'label':'Number',value:'number'}]" />

    <lightning:radioGroup name="theInputType" options="{!v.options}" value="{!v.inputType}" onchange="{!c.reRender}"/>
    <aura:if isTrue="{!v.rendered}">
        <lightning:input label="Input" name="someType" type="{!v.inputType}" value="{!v.value}" />

    reRender: function(component, event, helper) {
        component.set("v.rendered", false);
        setTimeout($A.getCallback(() => component.set("v.rendered", true)));

  • hey thanks a lot -- worked like a charm. it's strange that on a component some data updates trigger a rerender, while this one won't. Is there a rationale behind that? Seems like an omission to me... – Shuaib Ahmed Feb 9 '18 at 19:04
  • @ShuaibAhmed Seems like a bug, if you ask me. Presumably, there's no aura:valueChange attached to that attribute, so it can't be rerendered later. – sfdcfox Feb 9 '18 at 19:13
  • I ended up just straight up dynamically creating components fyi.. I like the control and flexibility it gave me. – Shuaib Ahmed Feb 14 '18 at 23:05

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.