Wobbly rendering when resetting value of v-radio component

122
February 22, 2022, at 5:40 PM

I am using v-radio components with a custom label like this:

<v-radio-group
  v-model="myData.selectedItem"
  :rules="[value => !!value]"
  class="radio-card-grid"
>
  <v-radio
    v-for="item in items"
    :key="item.id"
    :value="item.id"
    on-icon=""
    off-icon=""
    class="radio-card"
  >
    <template #label>
      <v-card>
        <v-card-text class="pa-0">
          <v-icon class="mt-2">
            {{ item.icon }}
          </v-icon>
          <p>{{ item.title }}</p>
        </v-card-text>
      </v-card>
    </template>
  </v-radio>
</v-radio-group>

The classes radio-card-grid and radio-card style the v-radio components in a grid of square buttons.

The whole thing is inside of a v-bottom-sheet that I use as a modal dialog.

The initial value of myData.selectedItem is undefined, so no v-radio is selected. When a v-radio is clicked, the value is being set according to item.id (which is unique in the set of items).

After closing the dialog, another dialog is being opened. This second dialog allows to navigate back to the first dialog.

Here's the issue:

When I open the dialog for the first time, everything works as expected. I select an item by clicking one of the v-radio, then the second dialog opens.

If I then go back to the first dialog, I reset the value of myData.selectedItem back to undefined in order to have a fresh dialog with no v-radio selected. This causes the whole layout to wobble a couple of times. Wobbling means that the v-cards slightly change their size and/or position (I can't really say what exactly is going on there), which causes the whole grid to wobble. The performance tab in the Chrome dev console shows lots of render events and Layout Shifts (interesting video on what that means here) while the wobbling occurs.

If I set the value of myData.seletedItem to one of the item id's instead, no wobbling occurs.

So this issue seems to be related to how the v-radio components are being checked if they are the one that is being selected - or something like this.

This is how far I could nail down the issue but I couldn't figure out hot to mitigate the issue or how to prevent it in the first place.

A workaround could be to add a hidden v-radio that is being selected to give the impression that no v-radio is being selected, but I would prefer to understand the issue and fix it without workarounds.

Any help appreciated!

EDIT: I was able to further nail the issue down by removing the line :rules="[value => !!value]" from the v-radio-group component. So apparently this happens when the validity of the input is being checked.

Rent Charter Buses Company
READ ALSO
How to change page color on scroll with fixed background

How to change page color on scroll with fixed background

I have a WordPress website runningI am trying to design something unique

137
How to move the window by x number of pixels using Javascript

How to move the window by x number of pixels using Javascript

How do I scroll a window or webpage down using Javascript? Basically, I want to move the web page down by certain number of pixels, using Javascript is there any way of doing that?

136
multiple pages are overlapping in ngx-extended-pdf-viewer

multiple pages are overlapping in ngx-extended-pdf-viewer

I am using ngx-extended-pdf-viewer for my angular app and looks like multiple pdf pages are overlapping during viewinghere is my viewer code

126
How do I compare and verify user input field to stored data BEFORE to sending form in ColdFusion

How do I compare and verify user input field to stored data BEFORE to sending form in ColdFusion

I’m updating a site for my brother who teaches training coursesHe has a registration form on the site that collects name, age, address, etc

118