question-mark
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.

InputNumber onChange callback should expose the change reason as a second callback parameter

See original GitHub issue
  • I have searched the issues of this repository and believe that this is not a duplicate.

What problem does this feature solve?

Right now InputNumber’s onChange can be cause by 4 sources: 1) user typing/paste, 2) click up button, 3) click down button, 4) onBlur When making a HOC on top of it, I find it’s impossible to add custom behavior because it’s very hard to figure out why the change happens

What I want to do:

  • a. InputNumber only commit value when user press enter, not during typing
  • b. press esc will revert to previous value
  • c. show a red border when value is not valid number, and not send the value

problems:

  • a. and b. pretty tricky to implement, because I need to add keyboard and click listener to guess what caused the change, there are some edge case, like right click -> paste I can’t guess correctly
  • c. when onBlur happens, the value is converted with parseFloat, which is not desired behavior, since things like 1a would be parsed to 1 and there is no way to know if it’s from onBlur, since custom onBlur handler happens after onChange

I’ve created 2 other tickets related to this. https://github.com/ant-design/ant-design/issues/14685 https://github.com/ant-design/ant-design/issues/14753 both rejected, which I totally understand, because it’s bad practice.

however, in order to implement it in the right way, I really need something to tell me what caused the change

What does the proposed API look like?

onChange : function(value: number | string, source: 'input' | 'up' | 'down' | 'blur')

🖐️ I can contribute to the rc-input-number project myself if you think this change is OK.

Issue Analytics

  • State:closed
  • Created 5 years ago
  • Comments:5 (5 by maintainers)

github_iconTop GitHub Comments

1reaction
postgetmecommented, Feb 19, 2020

same requirement

0reactions
zombieJcommented, Feb 28, 2019

👌Let’s close this first. Will reopen when get the same requirement.

Read more comments on GitHub >

github_iconTop Results From Across the Web

Passing an additional parameter with an onChange event
In order to pass a param from the child component to the parent you can take an argument to the arrow function. handleChange(event,...
Read more >
Difference between (change) and (ngModelChange) in Angular
In this post we're going to cover the difference between (change) and (ngModelChange) events with an inside an Angular component.
Read more >
How to handle the ValueChanged event and use forms and ...
Problem. Handling the ValueChanged event exposed from inputs interferes with two-way binding through @bind-Value and thus, with validation.
Read more >
InputNumber - Ant Design
API ; onChange, The callback triggered when the value is changed, function(value: number | string | null) ; onPressEnter, The callback function that...
Read more >
Element: <oj-input-number> - Oracle
Property change listener attribute (must be of type function, see Events and Listeners for additional information.) on-autocomplete-changed ...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found