onInvalidPaste not working, all other options are working

[marcdagatan]

Current behavior

Setting the onInvalidPaste to anything doesn't work at all. It's supposed to be set to truncate or ignore, but it's just screaming out errors. (It's literally cluttering our error reporting tools)

Expected behavior

onInvalidPaste should work as intended, depending on what is set.

Steps to reproduce the problem

1. Use autoNumeric version v4.6.0
2. In the browser Chrome version 85.0.4183.121
3. On the MacOS Mojave 10.14.6 operating system
4. Then instantiate the autoNumeric object with the following options:

I was first using the react-numeric package as it is a good react wrapper component to autonumeric. But, the onInvalidPaste didn't seem to work. So, I tried using autonumeric myself thinking it might just be react-numeric. (although, i checked out that package's code first and everything seems fine)

So, I tried it out like this:

// inside a react function component

const inputRef = useRef(null);
let autonumeric;

useEffect(() => {
  autonumeric = new AutoNumeric(inputRef.current, value, {
    ...props,
    modifyValueOnWheel: false,
    onInvalidPaste: 'ignore',
    outputFormat: 'number',
  });

  return function cleanup() {
    autonumeric.remove();
  };
}, []);

Link to live example (https://codepen.io/marcdagatan/pen/mdEPVbW)

I didn't even use react here. just your plain ol' vanilla js. And the problem is there. onInvalidPaste just doesn't work at all.

On a side note, I truly love this package. I've contributed a few lines here. But, it just throws error messages left and right. Getting crazy with error reporting apps. I am going to continue using this package on personal projects.

[marcdagatan]

So, my problem seems to be from this.

autoNumeric/src/AutoNumeric.js

Line 2141 in 4942988

AutoNumericHelper.throwError(`The value [${value}] being set falls outside of the minimumValue [${this.settings.minimumValue}] and maximumValue [${this.settings.maximumValue}] range set for this element`);

It seems that the pasted value doesn't go through onInvalidPaste first, but instead goes through here.

Shouldn't it go through the onInvalidPaste, and the pasted value be manipulated first based on the passed option, THEN go through the minimumValue and maximumValue validation?

This is a weird behavior to have it validated by the min/max first before going through the onInvalidPaste.

Although, when pasting any value, it really doesn't do any of the options: truncate, clamp or replace. It just goes stright to min max errors.

It feels hack-ish to manipulate the pasted value before going through autonumeric if the package is supposed to do it.

Edit: On second thought, it might seem that it's not going through the event handler for paste 🤔 thus, not really triggering the use of _onPasteFunc. Buut, it's assigned here

---

Different concern. Our Sentry.io is blowing up because of the min/max errors from autonumeric. It is probably good to have like a silenceErrors option? Where it just keeps quiet at the background.

We want to keep track of errors from our js, and never mind the value pasted to autonumeric because it's above the maximumValue set.

[AlexandreBonneau]

It's indeed not the intended behavior, as the onInvalidPaste option should take precedence over the min/max test.

On a side note, there is a showWarnings option to prevent showing any warning, but when I created that, I thought hiding errors would not be a good dev practice. Since this is a bug, the errors should not be shown normally.
I guess there is a use case for not showing any errors in CI pipelines. Could you please create an issue asking about that new option?

I'm currently swamped at work, and cannot check that out just yet, so it will be fixed whenever possible, sorry ;)

[kovalchukim]

You can try to use useLayoutEffect instead useEffect, it fixed the problem in my case

[phuhd-0935]

I have the same issue in the Chrome in Windows system, but in the Macos it's still work

[TanishqGuptaT2W]

Any Updates on this? Is the issue resolved.