Change event not firing in Safari

[johnwc]

Vue version

3.2.19

Link to minimal reproduction

Site is not public.

Steps to reproduce

Add @change="functionName" to input element.

What is expected?

Function gets called when input is changed.

What is actually happening?

Function does not get fired.

System Info

Safari version: 16.3 (18614.4.6.1.5)
Mac OS: Ventura 13.2 (22D49)

Any additional comments?

Verified that Safari does support the change event. https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event

[LinusBorg]

This works fine for me in Safari 16.3:

https://play.vuejs.org/#eNo9jbEOgzAQQ3/FzRJYYK/Sqv2PWxA92qhwicIFBsS/NwKpo+1nezPPGJsls7kaN/fJR8XMmuOdxE8xJMWGxAN2DClMsAW1JCRDll59EHQjF6iqsZEAq5dXWJvDrGz/6eTN4IVFsYb0nS+2JtlJXHuelZsilKc4dspFAc5LzIrHWb6ROcbIlNC1f9LsP2pPQn0=

If you can provide a reproduction, we can consider reopening this issue.

[johnwc]

@LinusBorg Here is a example of it not working. https://jsfiddle.net/n5uyadpm/2/
Change the value in the second input from 401.7 to 4010.7. It fires in every other browser, except Safari.

[ggualino]

We're having a similar issue with Safari. The change event is not firing for computed properties. we are removing the comma of the string and converting the string to a number. we are not using the brightspace but the same issue.

[LinusBorg]

@LinusBorg Here is a example of it not working. jsfiddle.net/n5uyadpm/2 Change the value in the second input from 401.7 to 4010.7. It fires in every other browser, except Safari.

Interesting. It only happens with the formatter though. if you just return the raw value from the computed's getter, everything works: https://jsfiddle.net/Linusborg/zsw4nd0c/1/

Seems the formatter screws up something. So Still does not feel like a bug on our side, but worth investigating.

I'll reopen.

[johnwc]

What would really help is if the number modifier like v-model.number="varName" would allow valid characters like commas. As well as more modifiers like v-model.percent="varName", v-model.currency="varName", etc...

[matrosov2019]

@blur="triggerEventChange()"

[johnwc]

@blur="triggerEventChange()"

Change and blur event are not the same.

[chipit24]

This is a very insidious bug, and quite serious, no? It creates inconsistent state, allowing inputs to contain values and pass validation but the state not to hold any value. I ran into it in the library linked above thinking it was a bug just with that library.