fix(VSelect): update visible items when eager is set

fixes #19765
vuetifyjs · Jul 25, 2024 · 7d3557a · 7d3557a
1 parent b9ed79d
commit 7d3557a
Show file tree

Hide file tree

Showing 5 changed files with 21 additions and 0 deletions.
diff --git a/packages/vuetify/src/components/VAutocomplete/VAutocomplete.tsx b/packages/vuetify/src/components/VAutocomplete/VAutocomplete.tsx
@@ -314,6 +314,11 @@ export const VAutocomplete = genericComponent<new <
       }
     }
 
+    function onAfterEnter () {
+      if (props.eager) {
+        vVirtualScrollRef.value?.calculateVisibleItems()
+      }
+    }
     function onAfterLeave () {
       if (isFocused.value) {
         isPristine.value = true
@@ -466,6 +471,7 @@ export const VAutocomplete = genericComponent<new <
                   openOnClick={ false }
                   closeOnContentClick={ false }
                   transition={ props.transition }
+                  onAfterEnter={ onAfterEnter }
                   onAfterLeave={ onAfterLeave }
                   { ...props.menuProps }
                 >

diff --git a/packages/vuetify/src/components/VCombobox/VCombobox.tsx b/packages/vuetify/src/components/VCombobox/VCombobox.tsx
@@ -365,6 +365,11 @@ export const VCombobox = genericComponent<new <
         }
       }
     }
+    function onAfterEnter () {
+      if (props.eager) {
+        vVirtualScrollRef.value?.calculateVisibleItems()
+      }
+    }
     function onAfterLeave () {
       if (isFocused.value) {
         isPristine.value = true
@@ -510,6 +515,7 @@ export const VCombobox = genericComponent<new <
                   openOnClick={ false }
                   closeOnContentClick={ false }
                   transition={ props.transition }
+                  onAfterEnter={ onAfterEnter }
                   onAfterLeave={ onAfterLeave }
                   { ...props.menuProps }
                 >

diff --git a/packages/vuetify/src/components/VSelect/VSelect.tsx b/packages/vuetify/src/components/VSelect/VSelect.tsx
@@ -286,6 +286,11 @@ export const VSelect = genericComponent<new <
         menu.value = false
       }
     }
+    function onAfterEnter () {
+      if (props.eager) {
+        vVirtualScrollRef.value?.calculateVisibleItems()
+      }
+    }
     function onAfterLeave () {
       if (isFocused.value) {
         vTextFieldRef.value?.focus()
@@ -388,6 +393,7 @@ export const VSelect = genericComponent<new <
                   openOnClick={ false }
                   closeOnContentClick={ false }
                   transition={ props.transition }
+                  onAfterEnter={ onAfterEnter }
                   onAfterLeave={ onAfterLeave }
                   { ...computedMenuProps.value }
                 >

diff --git a/packages/vuetify/src/components/VVirtualScroll/VVirtualScroll.tsx b/packages/vuetify/src/components/VVirtualScroll/VVirtualScroll.tsx
@@ -61,6 +61,7 @@ export const VVirtualScroll = genericComponent<new <T, Renderless extends boolea
     const vm = getCurrentInstance('VVirtualScroll')
     const { dimensionStyles } = useDimension(props)
     const {
+      calculateVisibleItems,
       containerRef,
       markerRef,
       handleScroll,
@@ -138,6 +139,7 @@ export const VVirtualScroll = genericComponent<new <T, Renderless extends boolea
     })
 
     return {
+      calculateVisibleItems,
       scrollToIndex,
     }
   },

diff --git a/packages/vuetify/src/composables/virtual.ts b/packages/vuetify/src/composables/virtual.ts
@@ -244,6 +244,7 @@ export function useVirtual <T> (props: VirtualProps, items: Ref<readonly T[]>) {
   }, { deep: true })
 
   return {
+    calculateVisibleItems,
     containerRef,
     markerRef,
     computedItems,