Seems like when browser trigger autofill value for NumberInput, it doesn't trigger on:change event
{ data.requestAmount }
<div class="flex">
<span class="flex-none rounded-l text-gray-800 p-2 mb-3 bg-white inline">
Rp
</span>
<NumberInput class="flex-1 inline p-2 mb-3 text-gray-800 bg-white rounded-r focus:outline-none" type="text" id="requestAmount" name="requestAmount" placeholder="Nominal" on:change={({ detail }) => data.requestAmount = (detail.inputState.maskedValue + '').replace(/[^0-9]+/g, "")}/>
</div>When I input manually without using browser autofill, it works as expected
But when I click on browser suggested fill, it won't work
One solution I think to handle this is to check value on blur
MaskInput.svelte line 137
function handleBlur(e) {
canSetSelection = false;
// Checking if target value is different, and apply it. Handling browser autofill
if (e.target.value !== inputValue) {
input.input(e.target.value);
}
dispatch('blur', e);
}Other solution is to check periodically if there is different value
let interval
function handleFocus(e) {
canSetSelection = true;
if (interval) {
window.clearInterval(interval);
}
interval = window.setInterval(() => {
if (e.target.value !== inputValue) {
input.input(e.target.value);
}
});
dispatch('focus', e);
}
function handleBlur(e) {
canSetSelection = false;
if (interval) {
window.clearInterval(interval);
}
dispatch('blur', e);
}What do you think?
Seems like when browser trigger autofill value for NumberInput, it doesn't trigger on:change event
{ data.requestAmount } <div class="flex"> <span class="flex-none rounded-l text-gray-800 p-2 mb-3 bg-white inline"> Rp </span> <NumberInput class="flex-1 inline p-2 mb-3 text-gray-800 bg-white rounded-r focus:outline-none" type="text" id="requestAmount" name="requestAmount" placeholder="Nominal" on:change={({ detail }) => data.requestAmount = (detail.inputState.maskedValue + '').replace(/[^0-9]+/g, "")}/> </div>When I input manually without using browser autofill, it works as expected
But when I click on browser suggested fill, it won't work
One solution I think to handle this is to check value on blur
MaskInput.svelte line 137
function handleBlur(e) { canSetSelection = false; // Checking if target value is different, and apply it. Handling browser autofill if (e.target.value !== inputValue) { input.input(e.target.value); } dispatch('blur', e); }Other solution is to check periodically if there is different value
let interval function handleFocus(e) { canSetSelection = true; if (interval) { window.clearInterval(interval); } interval = window.setInterval(() => { if (e.target.value !== inputValue) { input.input(e.target.value); } }); dispatch('focus', e); } function handleBlur(e) { canSetSelection = false; if (interval) { window.clearInterval(interval); } dispatch('blur', e); }What do you think?