Skip to content

[6.x] Add <ui-combobox> component (select fieldtype)#11771

Merged
jasonvarga merged 36 commits intouifrom
select-fieldtype
May 15, 2025
Merged

[6.x] Add <ui-combobox> component (select fieldtype)#11771
jasonvarga merged 36 commits intouifrom
select-fieldtype

Conversation

@duncanmcclean
Copy link
Copy Markdown
Member

@duncanmcclean duncanmcclean commented May 7, 2025

This pull request adds a new <Combobox> component, built on top of Reka's combobox.

This PR also integrates it nearly everywhere we were previously using <v-select>, like the select fieldtype, icon fieldtype and relationship fieldtypes.

CleanShot.2025-05-07.at.16.16.46.mp4

@duncanmcclean duncanmcclean changed the title [6.x] Select fieldtype [6.x] Add <ui-combobox> component (select fieldtype) May 7, 2025
Otherwise, when you're using a typeahead relationship field and the `<Combobox>` is mounted, there won't be any `options` passed in, so the currently selected option isn't visible.

By displaying the option label in the relationship fieldtype, we have the option's object (allowing us to get the title).
@duncanmcclean duncanmcclean marked this pull request as ready for review May 12, 2025 13:43
Copy link
Copy Markdown
Member

@jackmcdade jackmcdade left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Fantastic work @duncanmcclean!

Copy link
Copy Markdown
Member

@jasonvarga jasonvarga left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

If you could make ui/Select/Select.vue a wrapper around <Combobox> with with the searchable and maxSelections props set to false and 1 respectively by default, that'll be good.

</SelectContent>
</SelectPortal>
</SelectRoot>
<Combobox
Copy link
Copy Markdown
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We don't need to add :max-selections="1" here since it'll default to a single select without the multiple prop set.

@duncanmcclean
Copy link
Copy Markdown
Member Author

If you could make ui/Select/Select.vue a wrapper around <Combobox> with with the searchable and maxSelections props set to false and 1 respectively by default, that'll be good.

Done!

@jasonvarga jasonvarga merged commit 618250f into ui May 15, 2025
3 of 18 checks passed
@jasonvarga jasonvarga deleted the select-fieldtype branch May 15, 2025 18:08
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants