Did they break lightning:input with Summer'18?

Question

I'm aware that it's still beta, but I didn't expect them to break it for older api versions :/

<aura:application extends="force:slds">
    <aura:attribute name="myNumber" type="Decimal" default="1" />

    <lightning:input type="number" label="Number" value="{!v.myNumber}"/>
    <ui:inputNumber value="{!v.myNumber}" />
</aura:application>

This simple my.app works in spring'18 orgs, but doesn't in summer'18, using the newest Firefox 60.0.1 (Mac & PC). No matter if you switch to api version 41, 42 or 43.

The number is not changeable in the lightning:input field. The behavior is super super weird! If you start inspecting it with the Firefox inspector, it starts working. If you right click it, it might also work, when the value is empty.

It seems to be related to the fact, that something in the background switches the type of the input field to number, but it gets switched back to text. As soon as you can make it stick to number, it works as expected:

<input ... type="text">
to
<input ... type="number">

Is anyone out there aware of a way to quick-fix this?

Update:

After submitting a case, they created an issue for this, feel free to mark yourself as affected:

lightning:input type="number" is not editable in Firefox

Answer 1

There is a bug with lightning: input. When attribute value change in the background, the same value is not reflected back on the UI component.

It only takes the attribute value when it is initialized for the first time, that being said, the option we have now is to re-create lightning:input everytime you want to update new value.

This can be handled by using aura:if and valueChange event.

aura:if evaluates the isTrue expression on the server and instantiates components in either its body or else attribute. Only one branch is created and rendered. Switching condition unrenders and destroys the current branch and generates the other

<aura:application extends="force:slds">
    <aura:attribute name="myNumber" type="Decimal" default="1" />
    <aura:attribute type="Boolean" name="showLightningInputField" default="true"/>

    <aura:handler name="change" value="{!v.showLightningInputField}" action="{!c.recreateField}"/>


    <aura:if isTrue="{!v.showLightningInputField}">
       <lightning:input type="number" label="Number" value="{!v.myNumber}"/>
    </aura:if>

    <ui:inputNumber value="{!v.myNumber}" change="{!c.makeBooleanAsFalse}"/>
</aura:application>

JS:

({
    makeBooleanAsFalse : function(component, event, helper) {
        component.set("v.showLightningInputField",false);
    },

    recreateField : function(component, event, helper) {
        component.set("v.showLightningInputField",true);
    }
})

If you have a Premium account or you have an MVP in contact you can raise a CASE to ask them to fix this issue.

https://developer.salesforce.com/docs/atlas.en-us.lightning.meta/lightning/aura_compref_aura_if.htm

EDIT: Surprisingly in my other Summer 18 org this is not reproducible. They fixed it I guess. It is on Summer '18 Patch 6.1.

Answer 2

Update:

The Issue states it is fixed, for some reasons they did not mark the instances as fixed, but I can confirm, that it is fixed for us and our customers since a couple days.

Known Issue: lightning:input type="number" is not editable in Firefox