`@change` event not emitted in Safari

[chipit24]

Describe the bug

The @change event is not emitted on inputs that use maska in Safari.

Steps to reproduce

Set up a basic input that uses maska; I essentially copied the first example from the docs:

<script setup>
import { vMaska } from "maska"
import { ref } from "vue";

const inputValue = ref();
</script>

<template>
  <label for="my-input">
    Enter a value:
    <input id="my-input" v-maska data-maska="#-#" v-model.lazy="inputValue">
  </label>

  <output>{{inputValue}}</output>
</template>

It works the same with either v-model.lazy or just the @change event (which is what .lazy "de-sugars" to anyway). In Safari (I tested with Safari 17.2 on macOS 14.2 Sonoma), edit the value and observe that inputValue is not updated.

Not related to the main issue here, but I also noticed in the reproduction link below that despite data-maska="#-#" being set, if I remove .lazy and enter 123, it will set inputValue to 1-23 instead of 1-2 as expected.

Reproduction link

https://stackblitz.com/edit/vue-maska-rmd3vv?file=src%2FApp.vue

[beholdr]

Reproduction sandbox is using 2.0.0 version. With latest (2.1.11) there is no 1-23 issue. But main issue with Safari is confirmed. Will take a look, thanks.

[chipit24]

Reproduction sandbox is using 2.0.0 version. With latest (2.1.11) there is no 1-23 issue.

Ok, good to know! I'm running 2.1.11 in my app and wasn't seeing this error but figured I might as well point it out just in case.

But main issue with Safari is confirmed. Will take a look, thanks.

Thank you! 🙌

[beholdr]

Looks like it's a known bug: Safari do not firing change event after value of input was modified. blur event could helps as a workaround.

[beholdr]

Close for now because I don't know how to fix this case.