Browser autofill doesn't trigger on:change for NumberInput

[niwasmala]

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?

[xnimorz]

Hi @niwasmala
Yeah, I was thinking of the possible solution when I published this lib. However, there are no special events or aligned behavior between various platforms and browsers. Therefore we can handle all the changes only using on:blur or timeouts. So, I agree with you that it could be a good solution.

Unfortunately, I ain't able to spend time for the lib right now. I will be really thankful for the PR and will cut a new release.