From 4c0f7c7cc6432a38e36f33ad5c569dc5bab0c6dd Mon Sep 17 00:00:00 2001
From: Duncan McClean <duncan@duncanmcclean.com>
Date: Fri, 31 Jul 2026 14:44:03 -0400
Subject: [PATCH] show image choice options in a dropdown for field conditions

adds `image_choice` to the list of fieldtypes that get a select-style
value input in field conditions. its options use a `{key, label,
image}` shape (grid-based) rather than the `{key, value}` shape used
by select/checkboxes/radio (array-based), so `normalizeInputOptions`
now falls back to `label` when `value` isn't present.
---
 .../js/components/field-conditions/Condition.vue     |  2 +-
 .../js/components/fieldtypes/HasInputOptions.js      |  4 ++--
 resources/js/tests/NormalizeInputOptions.test.js     | 12 ++++++++++++
 3 files changed, 15 insertions(+), 3 deletions(-)

diff --git a/resources/js/components/field-conditions/Condition.vue b/resources/js/components/field-conditions/Condition.vue
index eea1a59d384..7e5a98adf2d 100644
--- a/resources/js/components/field-conditions/Condition.vue
+++ b/resources/js/components/field-conditions/Condition.vue
@@ -58,7 +58,7 @@ const isToggleField = (field) => ['toggle', 'revealer', 'yes_no'].includes(field
 const showValueToggle = computed(() => isToggleField(selectedField.value) && ['equals', 'not', '===', '!=='].includes(props.condition.operator));
 
 const showValueDropdown = computed(() => {
-    const optionTypes = ['button_group', 'checkboxes', 'radio', 'select', 'dropdown', 'multi_choice', 'ranking'];
+    const optionTypes = ['button_group', 'checkboxes', 'radio', 'select', 'dropdown', 'multi_choice', 'ranking', 'image_choice'];
     return optionTypes.includes(selectedField.value?.config?.type) && ['equals', 'not', '===', '!=='].includes(props.condition.operator);
 });
 
diff --git a/resources/js/components/fieldtypes/HasInputOptions.js b/resources/js/components/fieldtypes/HasInputOptions.js
index 600d83a1e94..6601ae1ac1a 100644
--- a/resources/js/components/fieldtypes/HasInputOptions.js
+++ b/resources/js/components/fieldtypes/HasInputOptions.js
@@ -17,10 +17,10 @@ export default {
                     let valueKey = 'value';
                     let labelKey = 'label';
 
-                    // Support both {key: '', value: ''} and {value: '', label: ''} formats.
+                    // Support {key: '', value: ''}, {key: '', label: ''}, and {value: '', label: ''} formats.
                     if (option.hasOwnProperty('key')) {
                         valueKey = 'key';
-                        labelKey = 'value';
+                        labelKey = option.hasOwnProperty('value') ? 'value' : 'label';
                     }
 
                     return {
diff --git a/resources/js/tests/NormalizeInputOptions.test.js b/resources/js/tests/NormalizeInputOptions.test.js
index 8997a8b58ef..0fa0b29d1b7 100644
--- a/resources/js/tests/NormalizeInputOptions.test.js
+++ b/resources/js/tests/NormalizeInputOptions.test.js
@@ -54,3 +54,15 @@ it('normalizes input options with array of objects with key value keys', () => {
         { value: 'two', label: 'Two' },
     ]);
 });
+
+it('normalizes input options with array of objects with key label keys', () => {
+    expect(
+        normalizeInputOptions([
+            { key: 'one', label: 'One', image: 'one.jpg' },
+            { key: 'two', label: 'Two', image: 'two.jpg' },
+        ]),
+    ).toEqual([
+        { value: 'one', label: 'Uno' },
+        { value: 'two', label: 'Two' },
+    ]);
+});