When clicking the "Click handler" div, a red tooltip shows on the top left of the viewport.
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.
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.
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().
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
nextTick()
and then clicking again a few times on the "Click handler" div, the style properties that evaluate tofalse
also get applied. The style binding includes the styles that evaluate tofalse
- this doesn't happen withoutnextTick()
.What is expected?
This could be expected behaviour but
style
properties that evaluate to Booleanfalse
should not be applied to the element. This is correct when not using theawait nextTick()
line in the reproduction link.What is actually happening?
When using
nextTick()
, styles that evaluate to Booleanfalse
still are applied to the element and are not being unset.System Info
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 tofalse
are not being rendered.Anyway the behaviour seems to be inconsistend depending on the usage of
nextTick()
.