From 6b6d9f5d496b4842caa959319a8afba6d69009ae Mon Sep 17 00:00:00 2001
From: Duncan McClean <duncan@duncanmcclean.com>
Date: Thu, 18 Sep 2025 11:52:37 +0100
Subject: [PATCH 1/6] Add `overflow-y-scroll` to combobox contents

---
 packages/ui/src/Combobox.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/ui/src/Combobox.vue b/packages/ui/src/Combobox.vue
index 80a1074f94d..3e25a5a744a 100644
--- a/packages/ui/src/Combobox.vue
+++ b/packages/ui/src/Combobox.vue
@@ -319,7 +319,7 @@ defineExpose({
                         :class="[
                             'shadow-ui-sm z-100 rounded-lg border border-gray-200 bg-white p-2 dark:border-white/10 dark:bg-gray-800',
                             'max-h-[var(--reka-combobox-content-available-height)] w-[var(--reka-combobox-trigger-width)] min-w-fit',
-                            '[&_[data-reka-combobox-viewport]]:grid [&_[data-reka-combobox-viewport]]:gap-1'
+                            '[&_[data-reka-combobox-viewport]]:grid [&_[data-reka-combobox-viewport]]:gap-1 overflow-y-scroll'
                         ]"
                         @escape-key-down="nextTick(() => $refs.trigger.$el.focus())"
                         data-ui-combobox-content

From 68c68a4570c88525844bc9c0d507f17cd866f419 Mon Sep 17 00:00:00 2001
From: Duncan McClean <duncan@duncanmcclean.com>
Date: Fri, 19 Sep 2025 10:27:25 +0100
Subject: [PATCH 2/6] Implement ComboboxVirtualizer

---
 packages/ui/src/Combobox.vue | 48 +++++++++++++++++++++---------------
 1 file changed, 28 insertions(+), 20 deletions(-)

diff --git a/packages/ui/src/Combobox.vue b/packages/ui/src/Combobox.vue
index 3e25a5a744a..10c01d8f938 100644
--- a/packages/ui/src/Combobox.vue
+++ b/packages/ui/src/Combobox.vue
@@ -1,6 +1,6 @@
 <script setup>
 import { cva } from 'cva';
-import { ComboboxAnchor, ComboboxContent, ComboboxEmpty, ComboboxInput, ComboboxItem, ComboboxRoot, ComboboxTrigger, ComboboxPortal, ComboboxViewport, FocusScope } from 'reka-ui';
+import { ComboboxAnchor, ComboboxContent, ComboboxEmpty, ComboboxInput, ComboboxItem, ComboboxRoot, ComboboxTrigger, ComboboxPortal, ComboboxViewport, ComboboxVirtualizer, FocusScope } from 'reka-ui';
 import { computed, nextTick, ref, useAttrs, useTemplateRef, watch } from 'vue';
 import Button from './Button/Button.vue';
 import Icon from './Icon/Icon.vue';
@@ -319,7 +319,7 @@ defineExpose({
                         :class="[
                             'shadow-ui-sm z-100 rounded-lg border border-gray-200 bg-white p-2 dark:border-white/10 dark:bg-gray-800',
                             'max-h-[var(--reka-combobox-content-available-height)] w-[var(--reka-combobox-trigger-width)] min-w-fit',
-                            '[&_[data-reka-combobox-viewport]]:grid [&_[data-reka-combobox-viewport]]:gap-1 overflow-y-scroll'
+                            'overflow-hidden'
                         ]"
                         @escape-key-down="nextTick(() => $refs.trigger.$el.focus())"
                         data-ui-combobox-content
@@ -333,34 +333,42 @@ defineExpose({
                                 event.preventDefault();
                             }"
                         >
-                            <ComboboxViewport>
+                            <ComboboxViewport class="max-h-[700px] overflow-y-auto">
                                 <ComboboxEmpty class="p-2 text-sm" data-ui-combobox-empty>
                                     <slot name="no-options" v-bind="{ searchQuery }">
                                         {{ __('No options available.') }}
                                     </slot>
                                 </ComboboxEmpty>
 
-                                <ComboboxItem
+                                <ComboboxVirtualizer
                                     v-if="filteredOptions"
-                                    v-for="(option, index) in filteredOptions"
-                                    :key="index + JSON.stringify(modelValue)"
-                                    :value="getOptionValue(option)"
-                                    :text-value="getOptionLabel(option)"
-                                    :disabled="isOptionDisabled(option)"
-                                    :class="itemClasses({ size: size, selected: isSelected(option) })"
-                                    as="button"
-                                    :data-ui-combobox-item="getOptionValue(option)"
-                                    @select="() => {
+                                    v-slot="{ option, virtualItem }"
+                                    :options="filteredOptions"
+                                    :estimate-size="37"
+                                    :text-content="(opt) => getOptionLabel(opt)"
+                                >
+                                    <div class="py-1 w-full">
+                                        <ComboboxItem
+                                            :key="virtualItem.index + JSON.stringify(modelValue)"
+                                            :value="getOptionValue(option)"
+                                            :text-value="getOptionLabel(option)"
+                                            :disabled="isOptionDisabled(option)"
+                                            :class="itemClasses({ size: size, selected: isSelected(option) })"
+                                            as="button"
+                                            :data-ui-combobox-item="getOptionValue(option)"
+                                            @select="() => {
                                         dropdownOpen = !closeOnSelect;
                                         if (closeOnSelect) $refs.trigger.$el.focus();
                                     }"
-                                >
-                                    <slot name="option" v-bind="option">
-                                        <img v-if="option.image" :src="option.image" class="size-5 rounded-full" />
-                                        <span v-if="labelHtml" v-html="getOptionLabel(option)" />
-                                        <span v-else>{{ __(getOptionLabel(option)) }}</span>
-                                    </slot>
-                                </ComboboxItem>
+                                        >
+                                            <slot name="option" v-bind="option">
+                                                <img v-if="option.image" :src="option.image" class="size-5 rounded-full" />
+                                                <span v-if="labelHtml" v-html="getOptionLabel(option)" />
+                                                <span v-else>{{ __(getOptionLabel(option)) }}</span>
+                                            </slot>
+                                        </ComboboxItem>
+                                    </div>
+                                </ComboboxVirtualizer>
                             </ComboboxViewport>
                         </FocusScope>
                     </ComboboxContent>

From 1971548fe6c25f0ed4a10c38fb760387352641d0 Mon Sep 17 00:00:00 2001
From: Duncan McClean <duncan@duncanmcclean.com>
Date: Fri, 19 Sep 2025 10:28:23 +0100
Subject: [PATCH 3/6] Prevent options from jiggling about when icon loads in

---
 resources/js/components/fieldtypes/IconFieldtype.vue | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/resources/js/components/fieldtypes/IconFieldtype.vue b/resources/js/components/fieldtypes/IconFieldtype.vue
index 7c3cc8d905e..0f868ceb45f 100644
--- a/resources/js/components/fieldtypes/IconFieldtype.vue
+++ b/resources/js/components/fieldtypes/IconFieldtype.vue
@@ -77,8 +77,10 @@ request();
     >
         <template #option="option">
             <div class="flex items-center">
-                <Icon v-if="!option.html" :name="option.label" class="size-4" />
-                <div v-if="option.html" v-html="option.html" class="size-4" />
+                <div class="size-4">
+                    <Icon v-if="!option.html" :name="option.label" class="size-4" />
+                    <div v-if="option.html" v-html="option.html" class="size-4" />
+                </div>
                 <span class="ms-3 truncate">
                     {{ __(option.label) }}
                 </span>

From 98ca31d04aed7da73a8df7b1cd4845d2792db3e9 Mon Sep 17 00:00:00 2001
From: Duncan McClean <duncan@duncanmcclean.com>
Date: Fri, 19 Sep 2025 14:39:57 +0100
Subject: [PATCH 4/6] Mock the ComboboxVirtualizer in tests

Since it relies on browser-specific APIs which we don't have in our tests.
---
 .../js/tests/components/ui/Combobox.test.js   | 26 +++++++++++++++++++
 1 file changed, 26 insertions(+)

diff --git a/resources/js/tests/components/ui/Combobox.test.js b/resources/js/tests/components/ui/Combobox.test.js
index 1d052a51b22..89baaed20d6 100644
--- a/resources/js/tests/components/ui/Combobox.test.js
+++ b/resources/js/tests/components/ui/Combobox.test.js
@@ -2,6 +2,32 @@ import { expect, test, beforeEach, vi, describe } from 'vitest';
 import { mount } from '@vue/test-utils';
 import { Combobox } from '@/components/ui';
 
+// Mock the ComboboxVirtualizer to render options without virtualization.
+// This is necessary because virtualization relies on browser APIs which aren't available in our tests.
+vi.mock('reka-ui', async () => {
+    const actual = await vi.importActual('reka-ui');
+    return {
+        ...actual,
+        ComboboxVirtualizer: {
+            name: 'ComboboxVirtualizer',
+            props: ['options', 'overscan', 'estimateSize', 'textContent'],
+            setup(props, { slots }) {
+                // Instead of virtualization, render all items directly
+                return () => {
+                    const items = props.options.map((option, index) => {
+                        return slots.default({
+                            option,
+                            virtualItem: { index, key: index, start: index * 37 },
+                            virtualizer: { scrollToIndex: () => {} }
+                        });
+                    });
+                    return items;
+                };
+            }
+        }
+    };
+});
+
 beforeEach(() => {
     Element.prototype.scrollIntoView = vi.fn();
 

From 15a8ff2033c1dc44abbf4e3d07737a92bbe7d79d Mon Sep 17 00:00:00 2001
From: Duncan McClean <duncan@duncanmcclean.com>
Date: Fri, 19 Sep 2025 14:40:05 +0100
Subject: [PATCH 5/6] simplify

---
 resources/js/tests/components/ui/Combobox.test.js | 5 +----
 1 file changed, 1 insertion(+), 4 deletions(-)

diff --git a/resources/js/tests/components/ui/Combobox.test.js b/resources/js/tests/components/ui/Combobox.test.js
index 89baaed20d6..b792de1b3ac 100644
--- a/resources/js/tests/components/ui/Combobox.test.js
+++ b/resources/js/tests/components/ui/Combobox.test.js
@@ -34,10 +34,7 @@ beforeEach(() => {
     global.__ = (key) => key;
 
     global.CSS = {
-        escape: (str) => {
-            // Simple implementation that handles most cases
-            return str.replace(/[!"#$%&'()*+,.\/:;<=>?@[\\\]^`{|}~]/g, '\\$&');
-        }
+        escape: (str) => str.replace(/[!"#$%&'()*+,.\/:;<=>?@[\\\]^`{|}~]/g, '\\$&')
     };
 
     document.body.innerHTML = '';

From 6319d79e005012f5e7a6a308dfb5926e7749d160 Mon Sep 17 00:00:00 2001
From: Duncan McClean <duncan@duncanmcclean.com>
Date: Fri, 19 Sep 2025 14:43:01 +0100
Subject: [PATCH 6/6] imports

---
 packages/ui/src/Combobox.vue | 14 +++++++++++++-
 1 file changed, 13 insertions(+), 1 deletion(-)

diff --git a/packages/ui/src/Combobox.vue b/packages/ui/src/Combobox.vue
index 10c01d8f938..f409b7a82ad 100644
--- a/packages/ui/src/Combobox.vue
+++ b/packages/ui/src/Combobox.vue
@@ -1,6 +1,18 @@
 <script setup>
 import { cva } from 'cva';
-import { ComboboxAnchor, ComboboxContent, ComboboxEmpty, ComboboxInput, ComboboxItem, ComboboxRoot, ComboboxTrigger, ComboboxPortal, ComboboxViewport, ComboboxVirtualizer, FocusScope } from 'reka-ui';
+import {
+    ComboboxAnchor,
+    ComboboxContent,
+    ComboboxEmpty,
+    ComboboxInput,
+    ComboboxItem,
+    ComboboxRoot,
+    ComboboxTrigger,
+    ComboboxPortal,
+    ComboboxViewport,
+    ComboboxVirtualizer,
+    FocusScope
+} from 'reka-ui';
 import { computed, nextTick, ref, useAttrs, useTemplateRef, watch } from 'vue';
 import Button from './Button/Button.vue';
 import Icon from './Icon/Icon.vue';