RobinHerbots / Inputmask

Input Mask plugin
https://robinherbots.github.io/Inputmask/
MIT License
6.39k stars 2.17k forks source link

onkeydown and onChange events do not fire when pressing the backspace key in the fractional part #2793

Open skrasnoyarov opened 4 months ago

skrasnoyarov commented 4 months ago

Hello! I use the inputmask with react and the "numeric" mask. I noticed that if you enter only the numbers after the comma, and then delete them using the "backspace" key, then onKeyDown and onChange with this key and value are not called. Because of this, I have a defective behavior with a controlled input where value is set to state.

Techn1c4l commented 4 months ago

I've tested on a simple HTML page, the events are firing as intended.

<!DOCTYPE html>
<html lang="en-US">
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.inputmask/5.0.9-beta.70/jquery.inputmask.min.js"></script>
</head>
<body>
<form>
<input type="text" id="field" value="1" onkeydown="log()" onchange="log2()" />
</form>
<script lang="JavaScript">
function log(event)
{
    console.log(Math.random());
}

function log2(event)
{
    console.log('changed');
}

window.onload = function () {
    const minimum = 1;
    const maximum = 100;

    const Options = {
        alias: 'decimal',
        allowMinus: true,
        inputType: 'text',
        rightAlign: false,
        min: minimum,
        max: maximum,
        noValuePatching: true,
        placeholder: '',
        radixPoint: '.',
        SetMaxOnOverflow: true,
        substituteRadixPoint: true,
        unmaskAsNumber: true,
        undoOnEscape: false
    };

    jQuery("#field").inputmask(Options);
};
</script>
</body>
</html>

This might be caused by the React's wrappers around <input> events. As for now, you can use Inputmask's own onKeyDown (https://robinherbots.github.io/Inputmask/#/documentation#onkeydown) event handler.