Bug description
The selectedOptions computed property in Combobox.vue fails to correctly match selected values when modelValue contains full option objects (rather than primitive values). This causes the component to display fallback objects with incorrect labels.
Expected Behaviour
The #selected-option slot should receive the full matching option object from props.options, which includes the correct label property.
The lookup fails because it compares a string (option[optionValue]) against an object (value), causing a fallback to { label: value, value } which duplicates the value as the label.
How to reproduce
Use the Combobox with option-value="class" and option-label="label"
Set the initial modelValue to an object like:
{ label: "00 (Duotone Thin)", value: "fa-duotone fa-thin fa-00" }Open the dropdown and select an option
Close the dropdown and observe the #selected-option slot receives:
{ label: "fa-duotone fa-thin fa-00", value: "fa-duotone fa-thin fa-00" }instead of the full option object from options.
Logs
Environment
Environment
Laravel Version: 12.56.0
PHP Version: 8.3.29
Composer Version: 2.9.5
Environment: local
Debug Mode: ENABLED
Maintenance Mode: OFF
Timezone: UTC
Locale: de
Cache
Config: NOT CACHED
Events: NOT CACHED
Routes: NOT CACHED
Views: NOT CACHED
Drivers
Broadcasting: log
Cache: file
Database: mysql
Logs: stack / single
Mail: smtp
Queue: sync
Session: file
Storage
public/storage: NOT LINKED
Statamic
Addons: 2
Sites: 2 (Deutsch, Schweizerdeutsch)
Stache Watcher: Disabled
Static Caching: Disabled
Version: 6.10.0 PRO
Statamic Addons
aerni/font-awesome: dev-main
teamnovu/graphql-breadcrumbs: 1.0.8
Installation
Fresh statamic/statamic site via CLI
Additional details
The cause is this part
return selections.map((value) => {
return props.options.find((option) => getOptionValue(option) === value)
?? { label: value, value };
});
Bug description
The
selectedOptionscomputed property inCombobox.vuefails to correctly match selected values whenmodelValuecontains full option objects (rather than primitive values). This causes the component to display fallback objects with incorrect labels.Expected Behaviour
The
#selected-optionslot should receive the full matching option object fromprops.options, which includes the correct label property.The lookup fails because it compares a string (
option[optionValue]) against an object (value), causing a fallback to{ label: value, value }which duplicates the value as the label.How to reproduce
Use the Combobox with option-value="class" and option-label="label"
Set the initial modelValue to an object like:
Open the dropdown and select an option
Close the dropdown and observe the #selected-option slot receives:
instead of the full option object from options.
Logs
Environment
Installation
Fresh statamic/statamic site via CLI
Additional details
The cause is this part