Skip to content

Conversation

rdjanuar
Copy link
Contributor

@rdjanuar rdjanuar commented Jul 16, 2025

πŸ”— Linked issue

Resolves #4529, maybe #3882

❓ Type of change

  • πŸ“– Documentation (updates to the documentation or readme)
  • 🐞 Bug fix (a non-breaking change that fixes an issue)
  • πŸ‘Œ Enhancement (improving an existing functionality)
  • ✨ New feature (a non-breaking change that adds functionality)
  • 🧹 Chore (updates to the build process or auxiliary tools and libraries)
  • ⚠️ Breaking change (fix or feature that would cause existing functionality to change)

πŸ“š Description

πŸ“ Checklist

  • I have linked an issue or discussion.
  • I have updated the documentation accordingly.

@rdjanuar rdjanuar requested a review from benjamincanac as a code owner July 16, 2025 04:33
@rdjanuar rdjanuar requested a review from benjamincanac July 16, 2025 10:10
@benjamincanac benjamincanac changed the title feat(FormField): add required field support across form components feat(FormField): add required field support across form components Jul 16, 2025
@benjamincanac benjamincanac requested a review from romhml July 16, 2025 20:07
Copy link

pkg-pr-new bot commented Jul 16, 2025

npm i https://pkg.pr.new/@nuxt/ui@4534

commit: 720e2e2

Copy link
Member

@romhml romhml left a comment

Choose a reason for hiding this comment

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

Thanks @rdjanuar! Could you add a test for the required inheritance here? https://github.com/nuxt/ui/blob/v3/test/components/FormField.spec.ts#L97

@rdjanuar rdjanuar requested a review from romhml July 19, 2025 07:09
Comment on lines 26 to 47
async function renderFormField(options: {
props: Partial<FormFieldProps>
inputComponent: typeof inputComponents[number]
}) {
return await mountSuspended(UFormField, {
props: options.props,
return await mountSuspended(UForm, {
slots: {
default: {
// @ts-expect-error - Object literal may only specify known properties, and setup does not exist in type
setup: () => ({ inputComponent: options.inputComponent }),
setup: () => ({
formFieldProps: options.props,
inputComponent: options.inputComponent
}),
components: {
UFormField,
USelectMenu,
UForm,
...inputComponents
},
template: `
<component :is="inputComponent" />
<UFormField v-bind="formFieldProps">
<component :is="inputComponent" :model-value="'0'" />
</UFormField>
Copy link
Contributor Author

@rdjanuar rdjanuar Jul 19, 2025

Choose a reason for hiding this comment

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

we should refactor renderFormField to fit with required test because on reka-ui, there`s certain condition to show element that has required attr like select or input

https://github.com/unovue/reka-ui/blob/092026308f4631269c718f5ce11306fb8de71a3e/packages/core/src/Listbox/ListboxRoot.vue#L405-L410.

Copy link
Member

@romhml romhml left a comment

Choose a reason for hiding this comment

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

Thanks @rdjanuar :)

@benjamincanac
Copy link
Member

@rdjanuar Would you mind fixing the conflicts? 😬

@rdjanuar
Copy link
Contributor Author

rdjanuar commented Aug 9, 2025

Screenshot 2025-08-09 at 22 16 41

i get this error while updating snapshot, any idea how to fix it ? @benjamincanac

@rdjanuar rdjanuar closed this by deleting the head repository Aug 9, 2025
@benjamincanac benjamincanac added the v3 #1289 label Aug 27, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
v3 #1289
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Setting required="true" on a <UFormField> should also set it's child required to true
3 participants