react-component / react-component/input-number

Allowing more control on InputNumber

Open
#445 0 comments 0 reactions 0 assignees View on GitHub

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

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.