react-component / react-component/input-number
Allowing more control on InputNumber
Nobody has claimed this yet.
- Dominant language
- TypeScript
- Stars
- 323
- Forks
- 188
- Avg merge
- 20h 3m
- Merged PRs (30d)
- 1
Description
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
https://github.com/ant-design/ant-design/issues/14069#issuecomment-451468013
https://github.com/ant-design/ant-design/issues/28700#issuecomment-755014092
https://github.com/ant-design/ant-design/issues/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 https://github.com/ant-design/ant-design/issues/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 🐜 ❤️
Contributor guide
No contributing guide indexed for this repository
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start with the linked CodeSandbox demo.js and review how rc-input-number currently handles InputNumber values, decimal entry, and controlled updates. The issue is done when the project has settled on a supported API and its expected behavior for restricting decimals and letters is defined.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- react, typescript
- Domain
- frontend
- Issue type
- Feature
- Difficulty
- 5/5
- Estimated time
- Over a week
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100