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,