Input Number allows a-z characters

[jgmurillo10]

Version

3.2.2

Environment

MacOS, Google Chrome

Reproduction link

https://codesandbox.io/s/ox7mmz9n7y

Steps to reproduce

type in the InputNumber component

What is expected?

It must not allow the user to type a-z characters.

What is actually happening?

The InputNumber allows the user to type a-z characters

---

It is required the attribute type="number"

[afc163]

The interaction is by designed as <input type="number" />, which is allowed to input non-digits char in safari or firefox.

• InputNumber allows typing the letter "e" and "E" when type='number' #27014 (comment)
• We support formatter in InputNumber: https://ant.design/components/input-number/#components-input-number-demo-formatter

[jaisonjjames]

@afc163 https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/number
for Input number, we can not enter an alphabet, looking for the same feature on our inputNumber

[luanpotter]

Clearly the InputNumber should at least have an option to disallow letters, shouldn't it? Is there any workarounds?

[ztplz]

@luanpotter Please set type to number.

[luanpotter]

Hi, @ztplz , thanks so much for your feedback, it's working now!

[avalanche1]

@ztplz This is undocumented feature. It should be:

1. Documented
2. Set as default

Pls reopen!

[nossbigg]

I also agree with @avalanche1, as most people would expect <InputNumber> to accept only numbers by default (unless this behavior is explicitly overridden).

Seems like there's resistance for this change to be implemented in the underlying library rc-number-input too (see: react-component/input-number#113)

I guess the best way forward is that we just set type="number" when using <InputNumber> (as per #9421 (comment)) and move on 😕🤷🏻‍♂️

[guillermovasta]

type="number" doesn't work in Safari 14.1.

[ConorTighe]

In the onChange you can use the following to get around this with or without type="number" on the <Input /> component.

const onChange = (value) => {
    if (isNaN(value)) return;
    ... do stuff
  };

[DouggyC]

hows to trigger

In the onChange you can use the following to get around this with or without type="number" on the <Input /> component.

const onChange = (value) => {
    if (Number.isNaN(value)) return;
    ... do stuff
  };

how to trigger Forrm.Item warning message from onChannge?

[prakashmallow]

type="number" is not working on the Firefox browser. Please check and fix it. I need to not allow characters to type on InputNumber. How to achieve this?

[yoyo837]

It sounds like <Input /> would be more suitable for your needs.

[prakashmallow]

@yoyo837 I tried with but the type="number" is not working on Firefox browser.

[yoyo837]

I mean this #9421 (comment)

[prakashmallow]

@yoyo837 I will try this #9421 (comment)
and update here

[prakashmallow]

@yoyo837 @ConorTighe #9421 (comment) is not working.

[yoyo837]

@yoyo837 @ConorTighe #9421 (comment) is not working.

What it is you really want? confirm again.

[prakashmallow]

@yoyo837 InputNumber only allows entering numbers only. Don't allow text and special characters.

[yoyo837]

@yoyo837 InputNumber only allows entering numbers only. Don't allow text and special characters.

Yes, but <Input /> can do that. it allows you to enter any character.

[ConorTighe]

@yoyo837 @prakashmallow try isNaN

const onChange = (value) => {
    if (isNaN(value)) return;
    console.log(value);
  };

onChange(100);
onChange("aaa");
onChange(200);

[ConorTighe]

You could also do this which would probably be best:

const onChange = (value) => {
    const userInput = Number(value); // immutable value
    if (Number.isNaN(userInput)) return;
    console.log(userInput);
  };

onChange(100);
onChange("aaa");
onChange("@@@");
onChange("1000");
onChange(200);

Output when testing:

100
1000
200