Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

v-model.lazy does not update DOM element when it has focus after Vue model change #5875

Closed
lkroc opened this issue May 6, 2022 · 4 comments
Labels
🔨 p3-minor-bug Priority 3: this fixes a bug, but is an edge case that only affects very specific usage. 🐞 bug Something isn't working scope: v-model

Comments

@lkroc
Copy link

lkroc commented May 6, 2022

Version

3.2.33

Reproduction link

sfc.vuejs.org/

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)

@MinSomai
Copy link

MinSomai commented May 7, 2022

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.

@lkroc
Copy link
Author

lkroc commented May 7, 2022

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?

@liulinboyi
Copy link
Member

liulinboyi commented May 8, 2022

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?

this example better shows the issue.

@liulinboyi
Copy link
Member

@posva posva added scope: v-model 🔨 p3-minor-bug Priority 3: this fixes a bug, but is an edge case that only affects very specific usage. 🐞 bug Something isn't working labels May 9, 2022
liulinboyi added a commit to liulinboyi/core that referenced this issue May 10, 2022
iwusong pushed a commit to iwusong/core that referenced this issue May 13, 2022
@github-actions github-actions bot locked and limited conversation to collaborators Sep 27, 2023
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
🔨 p3-minor-bug Priority 3: this fixes a bug, but is an edge case that only affects very specific usage. 🐞 bug Something isn't working scope: v-model
Projects
None yet
4 participants