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

1 Answer 1


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... Commented Feb 9, 2018 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
    Commented Feb 9, 2018 at 19:13
  • I ended up just straight up dynamically creating components fyi.. I like the control and flexibility it gave me. Commented Feb 14, 2018 at 23:05

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .