Description
Vue version
3.4.15
Link to minimal reproduction
https://codepen.io/markfisher/details/poYdNrY
Steps to reproduce
Use v-model on a input with the required attribute, and add css to style it when it matches :user-invalid. On page load, the input will have the :user-invalid still applied in Firefox. This contrasts with using the long hand :value and @input.
What is expected?
It would be expected for v-model to behave exactly like the long-hand equivalent. Whether :user-invalid matches or not should not depend on the syntax used.
What is actually happening?
It is evident that v-model behaves differently to the long hand equivalent, as :user-invalid matches when using v-model but not when using the long hand. Admittedly this only happens in Firefox and maybe the heuristic algorithm for determining when :user-invalid could be improved there, but clearly something different is happening in the browser with the different syntax, which ought not to be the case.
System Info
No response
Any additional comments?
In all my forms, required text inputs had user-invalid styles applied on page load before receiving any user input.