From 3cbee0ca93230aa0bc215d23ecf66d235f257624 Mon Sep 17 00:00:00 2001
From: Duncan McClean <duncan@duncanmcclean.com>
Date: Mon, 24 Aug 2026 11:40:43 +0100
Subject: [PATCH 1/6] remove unused `createOption` method

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_0146FsnrtqFd6RhsnrEDf7Fy
---
 resources/js/components/inputs/relationship/SelectField.vue | 5 -----
 1 file changed, 5 deletions(-)

diff --git a/resources/js/components/inputs/relationship/SelectField.vue b/resources/js/components/inputs/relationship/SelectField.vue
index 628d716ae12..6f84d3d479e 100644
--- a/resources/js/components/inputs/relationship/SelectField.vue
+++ b/resources/js/components/inputs/relationship/SelectField.vue
@@ -191,11 +191,6 @@ export default {
 
             this.$emit('input', items);
         },
-
-        createOption(value) {
-            const existing = this.options.find((option) => option.title === value);
-            return existing || { id: value, title: value };
-        },
     },
 };
 </script>

From 25a9abc59cc910f5be2cd222f31358338eb1d791 Mon Sep 17 00:00:00 2001
From: Duncan McClean <duncan@duncanmcclean.com>
Date: Mon, 24 Aug 2026 11:40:57 +0100
Subject: [PATCH 2/6] skip the combobox trigger in the tab order when the
 search input is visible

The trigger and the input were both tabbable, so it took two presses of
the tab key to reach the input. The search query now only resets when the
dropdown closes, so a keystroke that opens the dropdown is not wiped.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_0146FsnrtqFd6RhsnrEDf7Fy
---
 resources/js/components/ui/Combobox/Combobox.vue | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/resources/js/components/ui/Combobox/Combobox.vue b/resources/js/components/ui/Combobox/Combobox.vue
index 67684f59fd9..f9666e6958a 100644
--- a/resources/js/components/ui/Combobox/Combobox.vue
+++ b/resources/js/components/ui/Combobox/Combobox.vue
@@ -147,7 +147,9 @@ const triggerRef = useTemplateRef('trigger');
 const searchInputRef = useTemplateRef('search');
 
 watch(searchQuery, (value) => emit('search', value, () => {}));
-watch(dropdownOpen, () => searchQuery.value = '');
+watch(dropdownOpen, (open) => {
+    if (!open) searchQuery.value = '';
+});
 
 const getOptionLabel = (option) => {
     const label = option?.[props.optionLabel];
@@ -390,7 +392,7 @@ defineExpose({
                     <ComboboxTrigger
                         as="div"
                         ref="trigger"
-                        :tabindex="disabled || readOnly ? -1 : 0"
+                        :tabindex="disabled || readOnly || shouldShowInput ? -1 : 0"
                         :class="triggerClasses"
                         data-ui-combobox-trigger
                         @keydown.enter="openDropdown"

From 6b30a823fbfffa161f5052cfab76f14465ecf919 Mon Sep 17 00:00:00 2001
From: Duncan McClean <duncan@duncanmcclean.com>
Date: Mon, 24 Aug 2026 11:41:33 +0100
Subject: [PATCH 3/6] show the typed value as an add option and respect the
 highlighted option on enter
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Previously the typed value only appeared as an option when nothing
matched, and pressing enter always committed the raw typed text — even
after arrowing to an option in the list. The typed value now always shows
as an `Add "..."` option at the top of the list, and enter selects
whichever option is highlighted.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_0146FsnrtqFd6RhsnrEDf7Fy
---
 .../fieldtypes/FormattingLocalesFieldtype.vue |  5 +-
 .../inputs/relationship/SelectField.vue       |  5 +-
 .../js/components/ui/Combobox/Combobox.vue    | 56 +++++++-----
 resources/js/stories/Combobox.stories.ts      | 88 +++++++++++++++++++
 4 files changed, 130 insertions(+), 24 deletions(-)

diff --git a/resources/js/components/fieldtypes/FormattingLocalesFieldtype.vue b/resources/js/components/fieldtypes/FormattingLocalesFieldtype.vue
index d2b77f2f279..ef038c9b35b 100644
--- a/resources/js/components/fieldtypes/FormattingLocalesFieldtype.vue
+++ b/resources/js/components/fieldtypes/FormattingLocalesFieldtype.vue
@@ -18,8 +18,9 @@
                 <span class="text-gray-500 dark:text-gray-400" v-text="getSample(value)" />
             </div>
         </template>
-        <template #option="{ value, label, sample }">
-            <template v-if="value === 'language'">{{ label }}</template>
+        <template #option="{ value, label, sample, create }">
+            <template v-if="create">{{ __('Add ":value"', { value }) }}</template>
+            <template v-else-if="value === 'language'">{{ label }}</template>
             <div v-else class="w-full flex justify-between">
                 <div class="text-start flex-1">
                     {{ label }}
diff --git a/resources/js/components/inputs/relationship/SelectField.vue b/resources/js/components/inputs/relationship/SelectField.vue
index 6f84d3d479e..0d383f608c9 100644
--- a/resources/js/components/inputs/relationship/SelectField.vue
+++ b/resources/js/components/inputs/relationship/SelectField.vue
@@ -18,10 +18,11 @@
             @update:modelValue="itemsSelected"
             @search="search"
         >
-            <template #option="{ title, hint, status }">
+            <template #option="{ title, hint, status, create }">
                 <div class="flex w-full text-left items-center gap-2">
                     <StatusIndicator v-if="status" :status="status" />
-                    <div v-text="title" class="truncate grow" />
+                    <div v-if="create" class="truncate grow">{{ __('Add ":value"', { value: title }) }}</div>
+                    <div v-else v-text="title" class="truncate grow" />
                     <ui-badge v-if="hint" size="sm" v-text="hint" />
                 </div>
             </template>
diff --git a/resources/js/components/ui/Combobox/Combobox.vue b/resources/js/components/ui/Combobox/Combobox.vue
index f9666e6958a..bd82d092901 100644
--- a/resources/js/components/ui/Combobox/Combobox.vue
+++ b/resources/js/components/ui/Combobox/Combobox.vue
@@ -234,37 +234,49 @@ const placeholder = computed(() => {
 });
 
 const filteredOptions = computed(() => {
-    if (!props.searchable || props.ignoreFilter) {
-        return props.options;
+    let results = [...props.options];
+
+    if (props.searchable && !props.ignoreFilter) {
+        const matches = new Set(
+            fuzzysort
+                .go(searchQuery.value, props.options, {
+                    all: true,
+                    ...(props.searchKeys?.length ? { keys: props.searchKeys } : { key: props.optionLabel }),
+                })
+                .map((result) => result.obj)
+        );
+
+        results = props.options.filter((option) => matches.has(option));
     }
 
-    const matches = new Set(
-        fuzzysort
-            .go(searchQuery.value, props.options, {
-                all: true,
-                ...(props.searchKeys?.length ? { keys: props.searchKeys } : { key: props.optionLabel }),
-            })
-            .map((result) => result.obj)
-    );
-
-    const results = props.options.filter((option) => matches.has(option));
-
-    if (props.taggable && searchQuery.value && results.length === 0) {
-        results.push({
+    if (shouldShowCreateOption.value) {
+        results.unshift({
             [props.optionLabel]: searchQuery.value,
             [props.optionValue]: searchQuery.value,
+            create: true,
         });
     }
 
     return results;
 });
 
+const shouldShowCreateOption = computed(() => {
+    if (!props.taggable || !searchQuery.value) return false;
+
+    const matchesSearchQuery = (option) =>
+        getOptionLabel(option) === searchQuery.value || String(getOptionValue(option)) === searchQuery.value;
+
+    return !props.options.some(matchesSearchQuery) && !selectedOptions.value.some(matchesSearchQuery);
+});
+
 function clear() {
     searchQuery.value = '';
     emit('update:modelValue', null);
 }
 
-function select() {
+function select(option) {
+    if (option.create) emit('added', getOptionValue(option));
+
     dropdownOpen.value = !shouldCloseOnSelect.value;
     if (shouldCloseOnSelect.value) triggerRef.value?.$el?.focus();
 }
@@ -333,6 +345,7 @@ function onPaste(e) {
 
 function pushTaggableOption(e) {
     if (!props.taggable) return;
+    if (e.defaultPrevented) return; // Reka prevents the event's default when it selects a highlighted option.
     if (e.target.value === '') return;
 
     e.preventDefault();
@@ -509,12 +522,15 @@ defineExpose({
                                             :class="itemClasses({ size: size, selected: isSelected(option) })"
                                             :data-ui-combobox-item="getOptionValue(option)"
                                             :title="getOptionLabel(option)"
-                                            @select="select"
+                                            @select="select(option)"
                                         >
                                             <slot name="option" v-bind="option">
-                                                <img v-if="option.image" :src="option.image" class="size-5 rounded-full" :alt="getOptionLabel(option)">
-                                                <span v-if="labelHtml" class="truncate" v-html="getOptionLabel(option)" />
-                                                <span class="truncate" v-else>{{ __(getOptionLabel(option)) }}</span>
+                                                <span v-if="option.create" class="truncate">{{ __('Add ":value"', { value: getOptionLabel(option) }) }}</span>
+                                                <template v-else>
+                                                    <img v-if="option.image" :src="option.image" class="size-5 rounded-full" :alt="getOptionLabel(option)">
+                                                    <span v-if="labelHtml" class="truncate" v-html="getOptionLabel(option)" />
+                                                    <span class="truncate" v-else>{{ __(getOptionLabel(option)) }}</span>
+                                                </template>
                                             </slot>
                                         </ComboboxItem>
                                     </div>
diff --git a/resources/js/stories/Combobox.stories.ts b/resources/js/stories/Combobox.stories.ts
index 11d1b945793..860e539f8b8 100644
--- a/resources/js/stories/Combobox.stories.ts
+++ b/resources/js/stories/Combobox.stories.ts
@@ -1076,6 +1076,94 @@ export const TestTaggableSinglePasteDoesNotCommitTags: Story = {
     },
 };
 
+export const TestTaggableShowsAddOptionAlongsideMatches: Story = {
+    tags: ['!dev', 'test'],
+    render: () => ({
+        components: { Combobox },
+        setup() {
+            const value = ref<string[]>([]);
+            return { value, options: defaultOptions };
+        },
+        template: `<Combobox v-model="value" :options="options" multiple taggable placeholder="Add tags..." />`,
+    }),
+    play: async ({ canvasElement }) => {
+        const canvas = within(canvasElement);
+        const trigger = canvas.getByRole('combobox');
+
+        await userEvent.click(trigger);
+
+        const input = document.querySelector('input[type="search"]') as HTMLInputElement;
+        await userEvent.type(input, 'the');
+
+        await new Promise((r) => setTimeout(r, 100));
+
+        const options = document.querySelectorAll('[data-ui-combobox-item]');
+        expect(options.length).toBe(3);
+        expect(options[0].getAttribute('data-ui-combobox-item')).toBe('the');
+        expect(options[0].textContent).toContain('Add "the"');
+    },
+};
+
+export const TestTaggableHidesAddOptionWhenQueryMatchesExistingOption: Story = {
+    tags: ['!dev', 'test'],
+    render: () => ({
+        components: { Combobox },
+        setup() {
+            const value = ref<string[]>([]);
+            return { value, options: defaultOptions };
+        },
+        template: `<Combobox v-model="value" :options="options" multiple taggable placeholder="Add tags..." />`,
+    }),
+    play: async ({ canvasElement }) => {
+        const canvas = within(canvasElement);
+        const trigger = canvas.getByRole('combobox');
+
+        await userEvent.click(trigger);
+
+        const input = document.querySelector('input[type="search"]') as HTMLInputElement;
+        await userEvent.type(input, 'The Midnight');
+
+        await new Promise((r) => setTimeout(r, 100));
+
+        const options = document.querySelectorAll('[data-ui-combobox-item]');
+        expect(options.length).toBe(1);
+        expect(options[0].getAttribute('data-ui-combobox-item')).toBe('the_midnight');
+    },
+};
+
+export const TestTaggableEnterSelectsHighlightedOption: Story = {
+    tags: ['!dev', 'test'],
+    args: {
+        'onUpdate:modelValue': fn(),
+        onAdded: fn(),
+    },
+    render: (args) => ({
+        components: { Combobox },
+        setup() {
+            const value = ref<string[]>([]);
+            return { value, options: defaultOptions, onUpdate: args['onUpdate:modelValue'], onAdded: args.onAdded };
+        },
+        template: `<Combobox v-model="value" :options="options" multiple taggable placeholder="Add tags..." @update:modelValue="onUpdate" @added="onAdded" />`,
+    }),
+    play: async ({ canvasElement, args }) => {
+        const canvas = within(canvasElement);
+        const trigger = canvas.getByRole('combobox');
+
+        await userEvent.click(trigger);
+
+        const input = document.querySelector('input[type="search"]') as HTMLInputElement;
+        await userEvent.type(input, 'the');
+
+        await new Promise((r) => setTimeout(r, 100));
+
+        await userEvent.keyboard('{ArrowDown}');
+        await userEvent.keyboard('{Enter}');
+
+        await expect(args['onUpdate:modelValue']).toHaveBeenCalledWith(['the_midnight']);
+        expect(args.onAdded).not.toHaveBeenCalled();
+    },
+};
+
 export const TestDropdownOpensOnSpace: Story = {
     tags: ['!dev', 'test'],
     render: () => ({

From f8aad490f310a02b6fdfae869e258da7ae807502 Mon Sep 17 00:00:00 2001
From: Duncan McClean <duncan@duncanmcclean.com>
Date: Mon, 24 Aug 2026 11:41:45 +0100
Subject: [PATCH 4/6] open the dropdown when tabbing into a taggable combobox
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Only keyboard focus from outside the component opens it — pointer
interactions leave opening to the trigger's own click handling, and
focus returning from a dropdown item is ignored so selecting an option
does not reopen it.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_0146FsnrtqFd6RhsnrEDf7Fy
---
 .../js/components/ui/Combobox/Combobox.vue    | 28 ++++++++++++++++++-
 resources/js/stories/Combobox.stories.ts      | 27 ++++++++++++++++++
 2 files changed, 54 insertions(+), 1 deletion(-)

diff --git a/resources/js/components/ui/Combobox/Combobox.vue b/resources/js/components/ui/Combobox/Combobox.vue
index bd82d092901..68abbda5812 100644
--- a/resources/js/components/ui/Combobox/Combobox.vue
+++ b/resources/js/components/ui/Combobox/Combobox.vue
@@ -142,7 +142,9 @@ const itemClasses = cva({
 
 const searchQuery = ref('');
 const dropdownOpen = ref(false);
+const focusedByPointer = ref(false);
 const rootRef = useTemplateRef('root');
+const wrapperRef = useTemplateRef('wrapper');
 const triggerRef = useTemplateRef('trigger');
 const searchInputRef = useTemplateRef('search');
 
@@ -319,6 +321,23 @@ function openDropdown(e) {
     updateDropdownOpen(true);
 }
 
+function onFocus(e) {
+    const byPointer = focusedByPointer.value;
+    focusedByPointer.value = false;
+
+    if (!props.taggable || byPointer || dropdownOpen.value) return;
+    if (!focusCameFromOutside(e)) return;
+
+    updateDropdownOpen(true);
+}
+
+function focusCameFromOutside(e) {
+    if (!e.relatedTarget) return false;
+    if ('rekaCollectionItem' in e.relatedTarget.dataset) return false;
+
+    return !wrapperRef.value?.contains(e.relatedTarget);
+}
+
 function onBlur(e) {
     if (!props.taggable) return;
 
@@ -384,7 +403,13 @@ defineExpose({
 </script>
 
 <template>
-    <div :class="wrapperClasses" v-bind="wrapperAttrs">
+    <div
+        ref="wrapper"
+        :class="wrapperClasses"
+        v-bind="wrapperAttrs"
+        @pointerdown="focusedByPointer = true"
+        @click="focusedByPointer = false"
+    >
         <div class="flex w-full min-w-0">
             <ComboboxRoot
                 ref="root"
@@ -424,6 +449,7 @@ defineExpose({
                                 type="search"
                                 autocomplete="off"
                                 v-model="searchQuery"
+                                @focus="onFocus"
                                 @blur="onBlur"
                                 @paste="onPaste"
                                 @keydown.enter="pushTaggableOption"
diff --git a/resources/js/stories/Combobox.stories.ts b/resources/js/stories/Combobox.stories.ts
index 860e539f8b8..0e983dcf6e8 100644
--- a/resources/js/stories/Combobox.stories.ts
+++ b/resources/js/stories/Combobox.stories.ts
@@ -1164,6 +1164,33 @@ export const TestTaggableEnterSelectsHighlightedOption: Story = {
     },
 };
 
+export const TestTaggableDropdownOpensOnTabFocus: Story = {
+    tags: ['!dev', 'test'],
+    render: () => ({
+        components: { Combobox },
+        setup() {
+            const value = ref<string[]>([]);
+            return { value, options: defaultOptions };
+        },
+        template: `
+            <input data-testid="before" />
+            <Combobox v-model="value" :options="options" multiple taggable placeholder="Add tags..." />
+        `,
+    }),
+    play: async ({ canvasElement }) => {
+        const canvas = within(canvasElement);
+
+        canvas.getByTestId('before').focus();
+        await userEvent.tab();
+
+        await new Promise((r) => setTimeout(r, 100));
+
+        const input = document.querySelector('input[type="search"]') as HTMLInputElement;
+        expect(document.activeElement).toBe(input);
+        await expect(document.querySelector('[data-ui-combobox-content]')).toBeTruthy();
+    },
+};
+
 export const TestDropdownOpensOnSpace: Story = {
     tags: ['!dev', 'test'],
     render: () => ({

From 0932c04218a1fa0cd555fe4fcbfbe52b793c3645 Mon Sep 17 00:00:00 2001
From: Duncan McClean <duncan@duncanmcclean.com>
Date: Mon, 24 Aug 2026 11:56:44 +0100
Subject: [PATCH 5/6] wip

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_0146FsnrtqFd6RhsnrEDf7Fy
---
 resources/js/components/ui/Combobox/Combobox.vue | 1 +
 1 file changed, 1 insertion(+)

diff --git a/resources/js/components/ui/Combobox/Combobox.vue b/resources/js/components/ui/Combobox/Combobox.vue
index 68abbda5812..67cea7d79ce 100644
--- a/resources/js/components/ui/Combobox/Combobox.vue
+++ b/resources/js/components/ui/Combobox/Combobox.vue
@@ -149,6 +149,7 @@ const triggerRef = useTemplateRef('trigger');
 const searchInputRef = useTemplateRef('search');
 
 watch(searchQuery, (value) => emit('search', value, () => {}));
+
 watch(dropdownOpen, (open) => {
     if (!open) searchQuery.value = '';
 });

From 215b81712b800484efc2d76591d8c720e524188c Mon Sep 17 00:00:00 2001
From: Duncan McClean <duncan@duncanmcclean.com>
Date: Mon, 24 Aug 2026 12:35:34 +0100
Subject: [PATCH 6/6] fix broken exposed ref access when adding custom
 validation rules

`defineExpose` unwraps refs, so `searchQuery.value` was `undefined` and
`hasUnfinishedParameters` threw inside the `added` handler. Previously the
rule had already been added by the time the error was swallowed; now
`added` is emitted before the selection lands, so the throw aborted it.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_0146FsnrtqFd6RhsnrEDf7Fy
---
 resources/js/components/field-validation/Builder.vue | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/resources/js/components/field-validation/Builder.vue b/resources/js/components/field-validation/Builder.vue
index 384f30c8f72..f04f80aff51 100644
--- a/resources/js/components/field-validation/Builder.vue
+++ b/resources/js/components/field-validation/Builder.vue
@@ -256,8 +256,9 @@ export default {
 
         ifSearchNotFoundAddCustom() {
             let rulesSelect = this.$refs.rulesSelect;
-            let rule = rulesSelect.searchQuery.value;
+            let rule = rulesSelect?.searchQuery;
 
+            if (!rule) return;
             if (this.searchNotFound(rulesSelect) || this.hasUnfinishedParameters(rule)) return;
 
             this.add(rule);
@@ -272,7 +273,7 @@ export default {
         },
 
         searchNotFound(rulesSelect) {
-            return rulesSelect.searchQuery.value?.length === 0 || rulesSelect?.filteredOptions.length === 0;
+            return rulesSelect.filteredOptions.length === 0;
         },
 
         updated(rules) {