0

Why lightning:input type=number is no longer rendered as input type=number?

Earlier, when we were using <lightning:input type=number/>, it was rendering as <input type=number> and was displaying increment and decrement buttons. At the current Spring 2023 release looks like it is now rendered as <input type=text>.

Why this has been changed? Should we use just <input type=number> as a workaround?

2 Answers 2

1

Yes, I also experienced the same thing, this is also happening in LWC tags. It accepts only etkbm characters not just numbers.

When you type any number with the above-mentioned characters and remove focus from the input tag, it will evaluate the expression.

for ex - 11b will turn into - 11,00,00,00,000.

It all has a different meaning -

b - billion.

k - thousand.

m - million.

t - trillion.

e - 11e3 - 11,000. So it will be - 11 * (10 * 10 * 10).

3
  • well, this doesn't answer my question. How this is related to the fact that incrementing and decrementing buttons do not appear?
    – Patlatus
    Commented Jan 25, 2023 at 14:26
  • I'm just explaining why the buttons are not coming. As you already knew the workaround. Commented Jan 25, 2023 at 14:29
  • Well, I disagree that this explains why the buttons are not coming. It is actually possible to have number shortcuts and buttons.
    – Patlatus
    Commented Jan 26, 2023 at 8:37
0

I have opened a Salesforce support case for this but haven't received any feedback yet.

As a workaround, I use HTML Input with type=number

               <div>
                    <label class="slds-form-element__label slds-no-flex">
                        Select the value
                    </label>
                    <div class="slds-form-element__control slds-grow">
                        <input
                            class="slds-input"
                            type="number"
                            value={filterValue}
                            disabled={noFieldSelected}
                            onchange={handleOnChange}/>
                    </div>
                </div>

Update.

Before Spring 2020 and Summer 2020, there was consistent behavior (Lightning input type=number has been rendered as input type=number). To reconstruct this behavior, we need to build a custom component based on native HTML5 input type=number which is shown above. Such consistent behavior implementation is no longer available and is not used by Salesforce anymore. The rendering of lightning:input type=number is changed in Summer & Spring 20 releases.

Summer 20: https://help.salesforce.com/s/articleView?id=release-notes.rn_aura_components.htm&release=226&type=5

Spring 20: https://help.salesforce.com/s/articleView?id=release-notes.rn_aura_components.htm&release=224&type=5

Some standard objects in Lightning Experience like Account and Opportunity and Quote use new Lightning input number type implementation, which renders as text. There are multiple issues with this implementation (no increment and decrement buttons, and user can type text symbols not following a number and more than one symbol).

OpportunityLineItem and QuoteLineItem use Aura library ui:inputNumber component (https://developer.salesforce.com/docs/component-library/bundle/ui:inputNumber/example) which allows to type only one letter after a number but doesn't support scientific notation, doesn't allow to input letters not following numbers. Still, no decrement and increment buttons. There is no LWC library counterpart for the Aura ui:inputNumber component.

SF Support suggested to vote for this idea https://ideas.salesforce.com/s/idea/a0B8W00000GdaUFUAZ/ability-to-disable-keyboard-shortcuts-in-lightning-experience

However, it doesn't really address this concern, so I have created my own idea https://ideas.salesforce.com/s/idea/a0B8W00000N6LFGUA3/fix-the-problem-with-input-typenumber-field

2
  • You can also use component.find("myinput").reportValidity(); method, if you want to go with the lightning:input tag. Commented Jan 25, 2023 at 13:52
  • Well, even if I use component.find("myinput").reportValidity(); method, that won't bring back the incrementing and decrementing buttons
    – Patlatus
    Commented Jan 25, 2023 at 14:26

You must log in to answer this question.

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