Lightning:inputField not allowing decimal numbers to be inserted

Question

I am using <lightning:recordEditForm> and <lightning:inputField fieldName="customField"/> to create a form. My custom field is Number field with setup number(16,2) - length 16, decimal places 2.

When i try to insert decimal number to my form, i get the error message:

Anybody faced the problem?

Thanks in andvance.

Answer 1

The issue seems in the way lightning:inputField has been implemented. Here are some interesting findings around lightning:inputField implementation.

And I posted an idea based on this issue on the idea forum for this.

---

Once rendered, lightning:inputField with underlying field as Decimal is rendered as HTML <input type="number" ../>. This HTML tag has a step attribute which determines the decimal increment value for the input being entered in the field. If you observe the step value for a rendered inputField component on Chrome console, it shows as step="1" with all other details.

Interestingly, there's no step attribute available for lightning:inputField, thus you really cannot control this value and its up to the framework to define that, which looks like it's only defaulted as 1 in this case.

My code as on component:
<lightning:inputField aura:id="customField" fieldName="jdforce__My_Decimal_Field__c"  />

As rendered:  
<input type="number" id="input-1" step="1" name="jdforce__My_Decimal_Field__c" class="slds-input" style="position: absolute; opacity: 1;">

And if you edit the generated HTML to change the step value in there, you will see that you don't get the error.

---

Now, if you use lightning:input which is derived from HTML input tag, you have an option of setting the step value for this component. So if I have something as below in my component, I can control what are the allowable values.

My code as on component:
<lightning:input type="number" name="decimal" label="Enter a decimal value" step="0.01"/>

As rendered:
<input type="number" id="6:0" step="0.01" name="decimal" class="slds-input" style="position:absolute;" data-aura-rendered-by="15:0" >

Now in this scenario, if I attempt to say enter a value of 15.591, I get the same error (Your entry isn't a valid increment) because my step is defined to allow only two decimal places in this case.

---

Your Option:

To mitigate this scenario, you may just like to utilize lightning:input for decimal fields only in conjunction with lightning:inputField for other fields and during the component initialization, fetch the value from underlying record for all decimal fields and set the values in there.