v-model.lazy does not update DOM element when it has focus after Vue model change
Version
3.2.33
Reproduction link
Steps to reproduce
Within 5 seconds of the page loading, move the slider to any non-zero value (which makes sure the slider has DOM focus). After 5 seconds, timer will internally change the ref level to 0
What is expected?
Both the text to the left AND the slider go to 0 after 5 seconds
What is actually happening?
The text to the left goes to 0, but the slider remains where it was last dragged to
If the slider doesn't have focus (e.g. we don't move in in the 5 second window after page load), the slider also correctly goes to 0. I have traced the bug to line 10436 of https://unpkg.com/vue@3.2.33/dist/vue.esm-browser.js (the "if (lazy) {return}" section)
AFAIK.
v-model.lazy reflects changes only after @changed event or after focus is lost in case of input fields.
If it is not your case. Please, do elaborate more.
My problem is when the source of the update is not in the input element (e.g. slider in my example in the reproductioin link), but in the JavaScript state that is bound to it using v-model (level in my example). They should reflect each other. But as the example shows, updating the JavaScript state doesn't correctly update the slider if the slider happens to have focus. This then leads to different states between the input element and the JavaScript state that's supposed to reflect it, which I assume is a problem, is it not?
My problem is when the source of the update is not in the input element (e.g. slider in my example in the reproductioin link), but in the JavaScript state that is bound to it using
v-model(levelin my example). They should reflect each other. But as the example shows, updating the JavaScript state doesn't correctly update the slider if the slider happens to have focus. This then leads to different states between the input element and the JavaScript state that's supposed to reflect it, which I assume is a problem, is it not?
this example better shows the issue.