Separate NumberInput Component

[texttechne]

Feature Request Description

Several issues regarding the input type=number component have come up:

• Add min and max for Input with type number #4209
• NumberInput: Deleting Number Via Del => wrong value onChange #4340
• NumberInput: Deleting Number with Comma via Backspace #4341

Since numbers do play an important role in any SAP system, this component should work reliably.

However, right now there is even documentation lacking => there's no way to try out / play around with such a component in your documentation. It's completely subsumed under the input component.

All of this leads me to the consideration that it could be worthwhile to create an own number component, which would also solve the issue of different attributes which are valid for any text input vs number input

• maxLength vs min/max
• step
• ...

Proposed Solution

Make an own component for number inputs!

Proposed Alternatives

Extend the documentation to have an example of an input type=number, so that people can try it out.

[texttechne]

@ilhan007 I think this is a suggestion tailored to your role, but I'm just guessing here...

[hristop]

Internal BLI was created: FIORITECHP1-28567

[hristop]

There are currently few issues / feature requests regarding this topic and we have decided to gather them here and continue in this thread as the main one.

In general, the topic is complex and we will need focused effort to proceed with it, which we currently do not have.
As already mentioned above, there is currently internal backlog item, which will be considered when forming the priorities we will work on.

Besides the above mentioned issues there are several more related to such numeric input:

• Writing numbers with a "dot" as decimal point using input type="Number" clears the input #5983
• ui5-input: failing tests #6171
• Input: Decimal Separator #6434
• Input: type "Number" doesn't allow decimal values on Firefox #7497
• [Feature Request]: ui5-input - Support for display value #7964

[texttechne]

Hi @hristop,

I went down that road some time back and I can only agree with your assessment: I've never created a more complex user interface, so it really requires focused effort...

Maybe you're interested in the outcome / behaviour: Here you find a storybook for our version of a NumberInput. And then we also created a CurrencyInput as well for convenience.

Source code is available, but it's built on top of React, so I don't know how helpful that is....

[hristop]

Hi @texttechne ,

Thank you for providing this! It will be helpful in some way for sure.

Best Regards,
Hristo