How do you dynamically update lightning:input type?

Question

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}" />
</lightning:layoutItem>

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

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}" />
    </aura:if>
</aura:application>

---

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

---