RobinHerbots/Inputmask

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

skrasnoyarov opened this issue · 1 comments

skrasnoyarov commented
  • Describe the bug

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.

  • Add a link to a codepen, jsfiddle or other example page which shows the problem
    codesandbox
  • OS: macos 12.5.1
  • Browser: arc
  • Inputmask version: 5.0.8
Techn1c4l commented

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.