react-component / input-number

React Input Number

Home Page:https://input-number.vercel.app/

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Allowing more control on InputNumber

aghArdeshir opened this issue · comments

I want to have an Ant Design's InputNumber component. InputNumber has those beautiful up & down controls and is more numeric, so I want to use it. But the problem is that I don't have much control over it. For my specific use case I want my users not being able to enter decimal values (e.g. 45.789). I want them to be only able to write in numbers. (writing dot (.) or any letter should not appear in the input box at all). InputNumber is a good candidate, because with input of type="text" I can have those arrows which look like Number Input. (but right now I can not have control over InputNumber's value)

https://codesandbox.io/s/basic-antd-4-21-3-forked-vznuob?file=/demo.js

I believe the value property must behave the same way it behaves for inputs in DOM. It must force the current value of the input; But apparently this is a design decision from beginning for rc-input-number. So that would be a breaking change.

I have other options in mind as well, so if we don't want to introduce breaking change, like having this feature in a very un-breaking way, like having a new prop:

<InputNumber forceValue={3} />

or

<InputNumber forceValue={() => 3} />

(Consider InputNumber above as rc-input-number's input) So it can handle another range of use cases like mine!

I also checked several other UI Libraries and all their number inputs allow developer to have freedom to have controlled input (just like how they are comfortable in React) (https://reactjs.org/docs/forms.html#controlled-components)

Take a look at each of these UI libraries (links already take you to intended page) (Note that you cannot enter letters in none of those input numbers)

https://rsuitejs.com/components/input-number/
https://primefaces.org/primereact/inputnumber/
https://chakra-ui.com/docs/components/number-input/usage
https://blueprintjs.com/docs/#core/components/numeric-input

https://mui.com/material-ui/react-text-field/#form-props (There is a number input in the middle)
https://v2.grommet.io/maskedinput (here it is possible using a masked input)
https://react-bootstrap.netlify.app/forms/input-group/ (It does not have a pre-pared example for preventing you from entering letters, but you can directly change the code example in place and make it controlled)

So there is a use case somewhere in the world to be able to have this (from UX point-of-view)

Things I searched

ant-design/ant-design#14069 (comment)
ant-design/ant-design#28700 (comment)
ant-design/ant-design#36216

This is not a bug report

Note that this is not a bug report. This is mostly a feature-request. I tried asking for this once in ant-design/ant-design#36216, but it was closed as duplicate of some already reported bugs. It was closed almost immediately and continue of the discussion was not possible. None of the mentioned issues were convincing and I'm looking for confirmation. If we are gonna have this feature/change in rc-input-number, I may be able to implement it as a non-breaking change.

So please let this issue open for discussion. Thanks 🐜 ❤️