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

fix: pass template refs to slots as functions #19731

Merged
merged 9 commits into from
May 7, 2024
Merged

fix: pass template refs to slots as functions #19731

merged 9 commits into from
May 7, 2024

Conversation

yuwu9145
Copy link
Member

@yuwu9145 yuwu9145 commented May 1, 2024

Temporarily upgrade to "vue": "^3.4.25" in dev playground to replicate the issue

Vue reproduction link

fixes #19713
fixes #19685

Description

Markup:

<template>
  <h2>Virtual Scroll Item slot ref</h2>
  <v-select
    :items="items"
    item-title="name"
    label="User"
    v-for="item in selectArr"
  >
    <template v-slot:item="{ props, item }">
      <v-list-item v-bind="props" :subtitle="item.raw.department" />
    </template>
  </v-select>
  <!-- <button @click="selectArr.push(1)">Add Select</button> -->

  <h2>VMenu activator ref</h2>
  <v-tooltip v-for="item in selectArr" text="Tooltip">
    <template v-slot:activator="{ props }">
      <v-btn v-bind="props">Tooltip</v-btn>
    </template>
  </v-tooltip>

  <br>
  <br>
  <br>
  <br>
  <h2>VDatePickerYears year slot ref</h2>
  <v-date-picker-years v-for="item in selectArr">
    <template v-slot:year="{ props }">
      <v-btn v-bind="props">year</v-btn>
    </template>
  </v-date-picker-years>
</template>

<script>
  export default {
    data: () => ({
      selectArr: [1, 1],
      items: [
        {
          name: 'John',
          department: 'Marketing',
        },
        {
          name: 'Jane',
          department: 'Engineering',
        },
        {
          name: 'Joe',
          department: 'Sales',
        },
        {
          name: 'Janet',
          department: 'Engineering',
        },
        {
          name: 'Jake',
          department: 'Marketing',
        },
        {
          name: 'Jack',
          department: 'Sales',
        },
      ],
    }),
    // mounted: function () {
    //   console.log('---refs--', this.$refs.test, this.$refs.tests)
    // },
  }
</script>



@yuwu9145 yuwu9145 requested a review from KaelWD May 1, 2024 14:53
@MajesticPotatoe MajesticPotatoe added T: bug Functionality that does not work as intended/expected C: VVirtualScroll labels May 1, 2024
@yuwu9145 yuwu9145 marked this pull request as draft May 2, 2024 00:53
@yuwu9145 yuwu9145 changed the title fix(VVirtualScrollItem): pass dynamic template ref function for itemRef fix(VVirtualScrollItem): enforce to use dynamic template ref function for itemRef May 2, 2024
@@ -327,3 +327,5 @@ export type ComponentInstance<T> = T extends { new (): ComponentPublicInstance<a
type ShortEmitsToObject<E> = E extends Record<string, any[]> ? {
[K in keyof E]: (...args: E[K]) => any;
} : E;

export type FunctionVNodeRef = (ref: Element | ComponentPublicInstance | null, refs: Record<string, any>) => void
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@yuwu9145 yuwu9145 marked this pull request as ready for review May 2, 2024 03:00
@KaelWD
Copy link
Member

KaelWD commented May 2, 2024

VOverlay does this too, maybe others.

@yuwu9145 yuwu9145 marked this pull request as draft May 3, 2024 11:07
@yuwu9145 yuwu9145 changed the title fix(VVirtualScrollItem): enforce to use dynamic template ref function for itemRef fix(VVirtualScrollItem/VOverlay/VDatePickerYears): enforce to use function template ref for the refs in slots May 4, 2024
@yuwu9145 yuwu9145 self-assigned this May 4, 2024
@yuwu9145 yuwu9145 added C: VDatePicker VDatePicker C: VOverlay VOverlay labels May 4, 2024
@yuwu9145 yuwu9145 marked this pull request as ready for review May 4, 2024 10:37
@yuwu9145 yuwu9145 requested a review from johnleider May 4, 2024 10:37
@yuwu9145
Copy link
Member Author

yuwu9145 commented May 4, 2024

Issue could happen to all slots whose props contain template ref, I found 3 places, they all have console errors when running in dev playground

  • virtual-scroll-Item default slot itemRef
  • overlay activator slot
  • date-picker-years year slot

Not sure whether date-picker-year worth to fix or not, because it's unlikely two appear the same time in a loop

@yuwu9145 yuwu9145 changed the title fix(VVirtualScrollItem/VOverlay/VDatePickerYears): enforce to use function template ref for the refs in slots fix: enforce the use of a function template ref in slots where the props have a template ref May 4, 2024
@KaelWD KaelWD added this to the v3.6.x milestone May 7, 2024
@KaelWD KaelWD merged commit f2c6050 into master May 7, 2024
17 of 18 checks passed
@KaelWD KaelWD changed the title fix: enforce the use of a function template ref in slots where the props have a template ref fix: pass template refs to slots as functions May 7, 2024
@KaelWD KaelWD deleted the fix-19713 branch May 7, 2024 12:15
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
C: VDatePicker VDatePicker C: VOverlay VOverlay C: VVirtualScroll T: bug Functionality that does not work as intended/expected
Projects
None yet
3 participants