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

Style binding is wrong when the property evaluates to false and using nextTick() #12368

Open
dsine-de opened this issue Nov 12, 2024 · 0 comments · May be fixed by #12372
Open

Style binding is wrong when the property evaluates to false and using nextTick() #12368

dsine-de opened this issue Nov 12, 2024 · 0 comments · May be fixed by #12372

Comments

@dsine-de
Copy link

dsine-de commented Nov 12, 2024

Vue version

3.5.12

Link to minimal reproduction

https://play.vuejs.org/#eNp9VE1v2zAM/SucCqwJkCbFtpPb7qvoYTtsxVbs5Iti07ZaWRIk2U0R5L+PkmwnS7v6Zn48Pj5S3LIvxiz7DlnGLj22RnKPH3MFcFmKHkR5lbNCK8+FQpsz+FxIUTyQ0eu6lpizGAtwHczQcFVKigvpK8rfA/VnoqIs4f4IJ9YhMWF7raUXhn4z559kKg1wN5gPgC5XB/To1xVWGA8OfWfIIlqjrYetxWoHldUtnFJXpxd7j8KNvyOWR+5cUX+OgEJ5uAICmG13c/Ik+0R58FVcOgzuXEn0wKVHq4jVrXbCC60oLIbECO6eVAFVp4roSqLN5rANnU3Iy57LLuC/OTJFDIDVij9y4WHsYDa/IBs8NkiQjXAgaToEB1RHty0qj+WCPEgFo47gdItetOiSvMcfgTXcgbHaoPUCXZJorX0zNSh6BDP06BYglrgkeANvQ5in6Cjg/wtgH9nqrm4itaT3QUkMLZOQhAo5ixrmLAkQYyeVnkv+KQkKILHyGZwv0p8VdUO/EWowEeO9PxEfAoJpB9m/SIepA9qYHJEO/SPaeUQaRicqmB1Pdf7i0rx5ZiSIXdj7tOnD1g+PhN7EyfQuE+c1Lx5qqztVnhVaapvBSVmWBAJgeFkKVWfw7txsEmyCGPcjAozTzYCvnZadD/v3PPmlShaHQlrQ8tmzMGzvMlBaBZDUxkCdLZh3xL0S9fLeaUWXJ5YPh6Y1gu7HTxOXLGfTNHLGpdSP36PN227UnHIaLB5esN+7TbDl7NaiQ9vTLk0+z22NPrlvfv+gV3XgbHXZhfv0ivMXRnmIYwr7SkqEs7ePi2y/xcND0t25m41H5camAtG4JDE+Z3SJrl9pfU/3/fJDzCNF2e4vmmjuJQ==

Steps to reproduce

  1. Open the SFC Playground reproduction link
  2. When clicking the "Click handler" div, a red tooltip shows on the top left of the viewport.
  3. When clicking again, the tooltip is being hidden. On the next click, it alternates its position and shows on the bottom right of the viewport.
  4. Now when the comment in the code is uncommented so the function uses nextTick() and then clicking again a few times on the "Click handler" div, the style properties that evaluate to false also get applied. The style binding includes the styles that evaluate to false - this doesn't happen without nextTick().

What is expected?

This could be expected behaviour but style properties that evaluate to Boolean false should not be applied to the element.
This is correct when not using the await nextTick() line in the reproduction link.

What is actually happening?

When using nextTick(), styles that evaluate to Boolean false still are applied to the element and are not being unset.

System Info

System:
    OS: Windows 11 10.0.22631
    CPU: (24) x64 13th Gen Intel(R) Core(TM) i7-13700KF
    Memory: 19.70 GB / 31.87 GB
  Binaries:
    Node: 23.1.0 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.22.21 - C:\Program Files\nodejs\yarn.CMD
    npm: 10.9.0 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Edge: Chromium (127.0.2651.74)
  npmPackages:
    vue: ^3.5.12 => 3.5.12

Any additional comments?

The documentation at https://vuejs.org/guide/essentials/class-and-style does not clearly state what happens to style bindings that have properties of type Boolean false, but class bindings that evaluate to false are not being rendered.

Anyway the behaviour seems to be inconsistend depending on the usage of nextTick().

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging a pull request may close this issue.

2 participants