vuetifyjs / vuetify

🐉 Vue Component Framework
https://vuetifyjs.com
MIT License
39.68k stars 6.95k forks source link

[Bug Report][3.0.0] [V-Buttons-Toggle] Ref - Desync & Relative – Do Not Set Values #15207

Open BlackYuzia opened 2 years ago

BlackYuzia commented 2 years ago

Environment

Vuetify Version: 3.0.0-beta.3 Vue Version: 3.2.36 Browsers: Chrome 102.0.0.0 OS: Windows 10

Steps to reproduce

  1. Open page
  2. Go to /bug-001
  3. Try click buttons
  4. Profit! You find bugs...

Expected Behavior

reactive and ref both work for array select

Actual Behavior

reactive - didn't work ref - partialy work, has bugs if you set any values by default

Reproduction Link

Fast reproduce link Source

Example

image

KaelWD commented 2 years ago

ref: looks ok to me, all three buttons are active initially reactive: expected, item groups don't modify the original array: https://vuejs.org/guide/essentials/reactivity-fundamentals.html#limitations-of-reactive

BlackYuzia commented 2 years ago

@KaelWD

Currently, this bug show on 100-500 ms and then work's fine. If you disable javascript, you see this bug.

image image

UPD: I don't sure, but maybe, reason of that bug is an SSR?

reactive: expected,

Okey, then that not a bug :eyes:

KaelWD commented 2 years ago

This is caused by the internal group model having a dependency on the items array, which is empty on the first render https://github.com/vuetifyjs/vuetify/blob/0ad9d7f0efba50f0be4d56b4d13a7aaf155dc765/packages/vuetify/src/composables/group.ts#L157-L161

BlackYuzia commented 2 years ago

This is caused by the internal group model having a dependency on the items array, which is empty on the first render

Suppose, #15202 also have the same trouble?

BlackYuzia commented 2 years ago

I set mode to private for my repo with sources, the same as before issues, if you require sources — call me.

johnleider commented 2 years ago

How do I test this locally? Is it only present in NUXT? The repo links are 404 for me.

BlackYuzia commented 2 years ago

@johnleider you mean source or reproduction link?

UPD: I open repo (as public). But, a bit later ( a few days ) I will close it again

KaelWD commented 2 years ago

There is a playground in #15215

tadvas commented 1 year ago

I have the same issue, so I will be able to test it once it's fixed. Thanks