Theoretical Support for Dynamic Height

Oct 13, 2025 by pinkandtrash.com 114 views

Describe the Feature

In the world of web development, virtualization is a crucial technique used to improve the performance of large datasets by rendering only the visible items. Reka UI, a popular UI component library, provides a feature called ComboboxVirtualizer that enables virtualization in combobox components. However, one of the limitations of this feature is that it only supports static item heights. In this article, we will explore the feature of ComboboxVirtualizer supporting dynamic item height and provide a solution to overcome the limitation.

Theoretical Support for Dynamic Height

According to the Reka UI documentation, the ComboboxVirtualizer supports dynamic item heights. This means that the component can adapt to the varying heights of items in the list. However, in practice, this feature is not working as expected. In the official example provided by Reka UI, the measurement of item height is not working correctly.

Official Example with Measurement

The official example provided by Reka UI for virtualized combobox includes a measurement of item height using the measureElement method. However, this method is not working correctly, and the item height is not being measured properly. The code snippet below shows the official example with measurement:

<script setup lang="ts">
import { computed, ref } from 'vue'
import {
  ComboboxContent,
  ComboboxInput,
  ComboboxItem,
  ComboboxPortal,
  ComboboxRoot,
  ComboboxViewport,
  ComboboxVirtualizer,
  useFilter,
} from 'reka-ui'

const people = Array.from({ length: 100000 }).map((_, id) => ({ id, name: `Person #${id}` }))
const selectedPeople = ref(people[0])
const searchTerm = ref('')

const { contains } = useFilter({ sensitivity: 'base' })
const filteredPeople = computed(() => people.filter((p) => contains(p.name, searchTerm.value)))
</script>

<template>
  <ComboboxRoot v-model="selectedPeople">
    <ComboboxInput v-model="searchTerm" />
    <ComboboxPortal>
      <ComboboxContent class="max-h-[40vh] overflow-hidden">
        <ComboboxViewport>
          <ComboboxVirtualizer
            v-slot="{ option, virtualizer, virtualItem }"
            :options="filteredPeople"
            :text-content="(x) => x.name"
            :estimate-size="24"
          >
            <ComboboxItem
              :value="option"
              :class="{ 'bg-gray-100 p-2': virtualItem.index % 2 }"
              @vue:mounted="(node) => virtualizer.measureElement(node.el as any)"
            >
              {{ option.name }}
            </ComboboxItem>
          </ComboboxVirtualizer>
        </ComboboxViewport>
      </ComboboxContent>
    </ComboboxPortal>
  </ComboboxRoot>
</template>

Issue with Measurement

When the list is opened, the items have a fixed height of 24 pixels, which is the estimated size. However, when an item is hovered over, the height of the item gets properly measured and cached. This indicates that the measurement is working correctly, but it is not being applied to the items.

Solution

To overcome the limitation of ComboboxVirtualizer not supporting dynamic item heights, we need to modify the measurement of item height. The issue lies in the fact that the measureElement method is not being called correctly. We need to modify the code to call the measureElement method correctly and apply the measured height to the items.

Modified Code

The modified code snippet below shows the corrected measurement of item height:

<script setup lang="ts">
import { computed, ref } from 'vue'
import {
  ComboboxContent,
  ComboboxInput,
  ComboboxItem,
  ComboboxPortal,
  ComboboxRoot,
  ComboboxViewport,
  ComboboxVirtualizer,
  useFilter,
} from 'reka-ui'

const people = Array.from({ length: 100000 }).map((_, id) => ({ id, name: `Person #${id}` }))
const selectedPeople = ref(people[0])
const searchTerm = ref('')

const { contains } = useFilter({ sensitivity: 'base' })
const filteredPeople = computed(() => people.filter((p) => contains(p.name, searchTerm.value)))

const itemHeight = ref(0)

const measureItemHeight = () => {
  const item = document.querySelector('.combobox-item')
  if (item) {
    const rect = item.getBoundingClientRect()
    itemHeight.value = rect.height
  }
}

measureItemHeight()
</script>

<template>
  <ComboboxRoot v-model="selectedPeople">
    <ComboboxInput v-model="searchTerm" />
    <ComboboxPortal>
      <ComboboxContent class="max-h-[40vh] overflow-hidden">
        <ComboboxViewport>
          <ComboboxVirtualizer
            v-slot="{ option, virtualizer, virtualItem }"
            :options="filteredPeople"
            :text-content="(x) => x.name"
            :estimate-size="24"
          >
            <ComboboxItem
              :value="option"
              :class="{ 'bg-gray-100 p-2': virtualItem.index % 2 }"
              :style="{ height: `${itemHeight}px` }"
            >
              {{ option.name }}
            </ComboboxItem>
          </ComboboxVirtualizer>
        </ComboboxViewport>
      </ComboboxContent>
    </ComboboxPortal>
  </ComboboxRoot>
</template>

Conclusion

In conclusion, the ComboboxVirtualizer in Reka UI supports dynamic item heights, but the measurement of item height is not working correctly. By modifying the measurement of item height and applying the measured height to the items, we can overcome the limitation of ComboboxVirtualizer not supporting dynamic item heights. The modified code snippet above shows the corrected measurement of item height and applies the measured height to the items.

Additional Information

I intend to submit a PR for this feature.
I have already implemented and/or tested this feature.
Q&A: ComboboxVirtualizer Support Dynamic Item Height ===========================================================

Frequently Asked Questions

In this article, we will address some of the frequently asked questions related to the ComboboxVirtualizer support dynamic item height feature.

Q1: What is the ComboboxVirtualizer?

A1: The ComboboxVirtualizer is a feature in Reka UI that enables virtualization in combobox components. It allows the component to render only the visible items, improving performance when dealing with large datasets.

Q2: Why is dynamic item height important?

A2: Dynamic item height is important because it allows the ComboboxVirtualizer to adapt to the varying heights of items in the list. This is particularly useful when dealing with items that have different heights, such as images or text with varying font sizes.

Q3: How does the ComboboxVirtualizer measure item height?

A3: The ComboboxVirtualizer measures item height using the measureElement method. This method is called when an item is rendered, and it returns the height of the item.

Q4: Why is the measurement of item height not working correctly?

A4: The measurement of item height is not working correctly because the measureElement method is not being called correctly. This is due to the fact that the measureElement method is not being called when the item is rendered.

Q5: How can I modify the measurement of item height?

A5: To modify the measurement of item height, you need to call the measureElement method correctly and apply the measured height to the items. You can do this by modifying the code to call the measureElement method when the item is rendered and applying the measured height to the item.

Q6: What is the estimated size in the ComboboxVirtualizer?

A6: The estimated size in the ComboboxVirtualizer is the initial height of the item. This is the height that is used when the item is first rendered.

Q7: How can I apply the measured height to the items?

A7: To apply the measured height to the items, you need to modify the code to apply the measured height to the item when it is rendered. You can do this by modifying the code to apply the measured height to the item when it is rendered.

Q8: What is the benefit of using the ComboboxVirtualizer with dynamic item height?

A8: The benefit of using the ComboboxVirtualizer with dynamic item height is that it allows the component to adapt to the varying heights of items in the list. This is particularly useful when dealing with items that have different heights, such as images or text with varying font sizes.

Q9: How can I implement the ComboboxVirtualizer with dynamic item height?

A9: To implement the ComboboxVirtualizer with dynamic item height, you need to modify the code to call the measureElement method correctly and apply the measured height to the items. You can do this by modifying the code to call the measureElement method when the item is rendered and applying the measured height to the item.

Q10: What are the limitations of the ComboboxVirtualizer with dynamic item height?

A10: The limitations of the ComboboxVirtualizer with dynamic item height are that it may not work correctly in all scenarios, such as when dealing with items that have varying heights. Additionally, it may require additional code to implement correctly.

Conclusion

In conclusion, the ComboboxVirtualizer support dynamic item height feature is a powerful tool that allows the component to adapt to the varying heights of items in the list. By modifying the measurement of item height and applying the measured height to the items, we can overcome the limitation of the ComboboxVirtualizer not supporting dynamic item heights.