Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

[BUG] InputNumber formatter not right when symbol is place behind of value

See original GitHub issue

Environment(required)

antd version: 2.8.1
OS and its version: OS X
Browser and its version: Chrome

What did you do? Please provide steps to re-produce your problem.

  <InputNumber formatter={value => `${value} %`} defaultValue={100} />

image below:

What do you expected?

% only present once, when type numbers into

Re-producible online demo

http://codepen.io/wytwyt01/pen/BWdzRV?editors=001

Issue Analytics

State:
Created 7 years ago
Comments:5 (4 by maintainers)

Top GitHub Comments

4reactions

minsungryucommented, Mar 16, 2017

I think it’s not a bug actually.

When you enter a number, value parameter returns a (number +%).

So every time you enter a number, it will be followed by an additional %.

I suggest you write this code

 <InputNumber formatter={(value) => `${value.replace('%', '')}%`} defaultValue={0} />

0reactions

lock[bot]commented, May 1, 2018

This thread has been automatically locked because it has not had recent activity. Please open a new issue for related bugs and link to relevant comments in this thread.

Top Results From Across the Web

How do you format a number to currency when using React ...

Custom formatting handler. Format number in an input or format as a simple text. Sample usage <NumberFormat value={2456981} displayType={'text'} ...

<input type="number"> - HTML: HyperText Markup Language

<input> elements of type number are used to let the user enter a number. They include built-in validation to reject non-numerical entries.

Why the number input is the worst input - Stack Overflow Blog

When the number input contains an invalid value and you retrieve the value, you get a blank string. · Valid numbers include more...

react-number-format - npm

React component to format number in an input or as a text. ... TypeScript icon, indicating that this package has built-in type declarations....

InputNumber - Ant Design

Use stringMode to support high precision decimals support. onChange will return string value instead. You need polyfill of BigInt if browser not support....