fix(FormGroup): Use explicit label instead of implicit label #638

aditio-eka · 2023-09-09T07:09:25Z

Fixes #621, fixes #675

vercel · 2023-09-09T07:09:28Z

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
ui	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Sep 19, 2023 1:29pm

benjamincanac · 2023-09-09T17:50:37Z

This PR reverts the changes made in #487 to the FormGroup component (more context in #491).

The form elements have been nested inside the label intentionally, what do you think @romhml?

romhml · 2023-09-10T13:58:39Z

This results in a unique constraint on FormGroup name attributes within a page which is not ideal. I found another way to fix the issue (https://github.com/nuxt/ui/pull/651/files) by preventing the click event from propagating to the label which caused the menu to open.

aditio-eka · 2023-09-11T00:43:18Z

I apologize for not mentioning the reason earlier. The use of implicit labels in FormGroup restricts it to conforming with the permitted content that labels can have, as mentioned in this link. Consequently, FormGroup can only be used for Input, Textarea, and Select elements.

I believe it's acceptable to have constraints on the FormGroup name attribute since we also utilize it as a path in the Form.

benjamincanac · 2023-09-11T08:41:56Z

For what form elements would you use the FormGroup if not for an input, textarea or select?

aditio-eka · 2023-09-11T09:59:23Z

Sorry, I made a typo in 'Consequently, FormGroup can only be used for Input, Textarea, and Select elements.' What I meant was Input, Textarea, and Select custom components.

Yes, you are correct; it can be used for 'input,' 'textarea,' or 'select.' However, for complex custom components like SelectMenu and DatePicker, we need to associate labels with labelable elements explicitly. This is because in SelectMenu or DatePicker, there may be multiple labelable elements.

aditio-eka · 2023-09-12T01:41:57Z

Hi @benjamincanac and @romhml , I tried adding an autogenerated ID assigned to the label attribute. What do you think?

romhml · 2023-09-12T13:00:14Z

@aditio-eka I experimented using FormGroup's with complex input component, and did not experience any problem (except for interactivity issues, that can be fixed by stopping the event propagation).

Here is an example with a date-picker: https://stackblitz.com/edit/nuxt-ui-rpmghm?file=app.vue

Do you have any example where the current implementation does not work as expected so I can look into it?

romhml · 2023-09-12T13:02:27Z

@benjamincanac can we move forward with #651 to fix interactivity issues with SelectMenu and other components?

benjamincanac · 2023-09-12T14:01:27Z

Closing this in favor of #651

aditio-eka · 2023-09-12T14:15:58Z

hai @benjamincanac and @romhml,

Until now, I have also only encountered interactivity issues, but those have been addressed in my recent pull request (PR).

I believe these issues arise due to the constraints of implicit labeling:

Nesting labels should be avoided. This can happen when we wrap UCheckbox or URadio with UFormGroup.
Avoid nesting two or more labelable elements. This can occur when we wrap USelectMenu with UFormGroup.

My recent PR aims to resolve these issues, and so far, it has been effective in preventing the problems you mentioned. Can we open the PR again? I think it doesn't sound ideal if we always have to add a stop propagation on the click event when creating new complex input components.

References:

romhml · 2023-09-12T21:16:19Z

@aditio-eka you're right, I did not notice it, but #651 introduces other issues with checkbox and radio components inside FormGroups (FYI @benjamincanac). Removing nested labels might be the only solution to properly address the issue.

I checked NaiveUI's implementation for reference but it looks like they don't bind label and inputs at all (https://github.com/tusen-ai/naive-ui/blob/main/src/form/src/FormItem.tsx#L84).

We're left with using <label for=...> like you are proposing and generating automatically to avoid issues with duplicate values.

romhml · 2023-09-12T21:21:50Z

src/runtime/components/forms/FormGroup.vue

@@ -93,13 +97,17 @@ export default defineComponent({

    const size = computed(() => ui.value.size[props.size ?? appConfig.ui.input.default.size])

+    const labelFor = `label-for-${increment = increment < 1000000 ? increment + 1 : 0}`


What about something like this to generate the random id?

const seed = Math.random().toString(36).substring(7) const labelFor = `${props.name}-${seed}`

const seed = Math.random().toString(36).substring(7) can cause mismatched hydration as the server and client can have different values.

@romhml, this is my reference for why I use an increment instead of a random value.

Wouldn't it be better to add the prop.name inside the labelFor? ${props.name}-${increment...}

Wouldn't it be better to add the prop.name inside the labelFor? ${props.name}-${increment...}

okay

@benjamincanac @romhml updated

IsraelOrtuno · 2023-09-13T09:48:44Z

@aditio-eka I experimented using FormGroup's with complex input component, and did not experience any problem (except for interactivity issues, that can be fixed by stopping the event propagation).

Here is an example with a date-picker: https://stackblitz.com/edit/nuxt-ui-rpmghm?file=app.vue

Do you have any example where the current implementation does not work as expected so I can look into it?

Maybe components like repeater style where you could have multiple <button> inside that <label> behaves weird. Check this and hover over the buttons and around them you will see how they behave.

https://stackblitz.com/edit/nuxt-ui-dn3yxh?file=app.vue

benjamincanac · 2023-09-14T13:19:11Z

@romhml Should we reopen this PR and revert your changes then?

romhml · 2023-09-14T13:44:25Z

@benjamincanac Yes!

benjamincanac

We should apply the same behaviour on Radio and Checkbox components so these can be used with the FormGroup too:

<input
        :id="labelFor || `${name}-${value}`"

benjamincanac · 2023-09-14T13:52:41Z

@aditio-eka Would you mind fixing the conflicts and at the same time reverting the @click="$event.preventDefault()" on the FormGroup?

aditio-eka · 2023-09-14T14:59:04Z

We should apply the same behaviour on Radio and Checkbox components so these can be used with the FormGroup too:

@benjamincanac, We should not apply it to URadio and UCheckbox because FormGroup can have multiple URadio or UCheckbox, causing duplicate ids. Instead, we should consider using fieldset and legend. I believe it would be better to handle this in a separate PR.

@aditio-eka Would you mind fixing the conflicts and at the same time reverting the @click="$event.preventDefault()" on the FormGroup?

Yes, I would

romhml

Looks good @aditio-eka @benjamincanac! I added just one suggestion to avoid overriding existing the id attribute if it's already provided by the user (which may be unexpected from the user's point of view).

romhml · 2023-09-18T11:30:32Z

src/runtime/composables/useFormGroup.ts

+import type { FormEvent, FormEventType, InjectedFormGroupValue } from '../types/form'

 export const useFormGroup = () => {
    const formBus = inject<UseEventBusReturn<FormEvent, string> | undefined>('form-events', undefined)
-    const formGroup = inject('form-group', undefined)
+    const formGroup = inject<InjectedFormGroupValue>('form-group')

    const blurred = ref(false)



I think we can tweak this composable to avoid overriding the id attribute if it's explicitly provided by the user like so:

<FormGroup name="foo"> <UInput id="bar" />  </FormGroup>

It can be achieved with something like this:

export const useFormGroup = (inputAttrs: { id: string }) => { const formBus = inject<UseEventBusReturn<FormEvent, string> | undefined>('form-events', undefined) const formGroup = inject<InjectedFormGroupValue>('form-group', undefined) if (formGroup) { // Update labelFor if input already has an id formGroup.labelFor.value = inputAttrs?.id ?? formGroup?.labelFor.value } // [...]

It's a good suggestion @romhml . If we want to avoid overriding the id attribute, I think we should also avoid overriding the name and size attributes. In the current source code, the name and size attributes can be overridden by UFormGroup. It would be good to have the same behavior for attribute assignment.

Agreed, this needs some cleanup to make it consistent across all properties, looks like:

size gives priority to the form group's value

name does not seem used outside of the Checkbox component and can be removed from the input props (not directly related but clicking on a Checkbox's label is broken if no name attribute is provided)

Ideally the priority should be set on the input's value and use the FormGroup's if none is provided.

I'd suggest to handle the id properly in this PR and open a new one to implement a consistent behaviour for other props to keep things manageable, what do you think?

Yes, that's great, @romhml. I will handle it.

@romhml updated

romhml · 2023-09-18T15:11:51Z

src/runtime/composables/useFormGroup.ts

    const formBus = inject<UseEventBusReturn<FormEvent, string> | undefined>('form-events', undefined)
-    const formGroup = inject('form-group', undefined)
+    const formGroup = inject<InjectedFormGroupValue>('form-group')


Suggested change

const formGroup = inject<InjectedFormGroupValue>('form-group')

const formGroup = inject<InjectedFormGroupValue>('form-group', undefined)

Fixes [Vue warn]: injection "form-group" not found.

romhml · 2023-09-18T15:16:39Z

src/runtime/components/forms/FormGroup.vue

@@ -92,14 +95,17 @@ export default defineComponent({
    })

    const size = computed(() => ui.value.size[props.size ?? appConfig.ui.input.default.size])
+    const labelFor = computed(() => `${props.name}-${increment = increment < 1000000 ? increment + 1 : 0}`)


Suggested change

const labelFor = computed(() => `${props.name}-${increment = increment < 1000000 ? increment + 1 : 0}`)

const labelFor = ref(`${props.name}-${increment = increment < 1000000 ? increment + 1 : 0}`)

This must be changed to a ref to allow write operations in useFormGroup

Hi @romhml, I've changed how to update labelFor when the input already has an id.

from

formGroup.labelFor.value = inputAttrs?.id ?? formGroup?.labelFor.value

to

const labelFor = computed(() => inputAttrs?.id || formGroup?.labelFor.value)

It will ensure that our labelFor value is updated based on the new id attribute of UInput and the new name attribute of UFormGroup.

I'm not able to test it right now but I think this won't update the for= attribute in the FormGroup if an id is provided

@romhml, these are my testing results. I hope they can be helpful.

Screen.Recording.2023-09-19.at.16.11.52.mov

Here's an example of what I meant:

<UFormGroup label="Email" name="email"> <UInput id="foo" v-model="state.email" /> </UFormGroup>

Results in the following:

<label for="email-4" ...>Email</label> <input id="foo" type="text" ...>

Instead of:

<label for="foo" ...>Email</label> <input id="foo" type="text" ...>

Which breaks accessibility features and interactions (like clicking on the label to focus the input).

Using

const labelFor = ref(`${props.name}-${increment = increment < 1000000 ? increment + 1 : 0}`)

allows to properly update the value in useFormGroup to handle explicit ids properly. Reactivity can then be achieved using watch, although I don't think it's needed here (can't see a lot of use cases)

Sorry, @romhml, I missed the previous comment. I have updated it.

... although I don't think it's needed here (can't see a lot of use cases)

I assumed there was a bug when there is a field array, but that's not the case. I tested it with my new update, and the bug doesn't appear.

romhml

Looks good to me! Thanks a lot @aditio-eka!

aditio-eka · 2023-09-20T00:53:34Z

Looks good to me! Thanks a lot @aditio-eka!

You're welcome, and thanks for your review as well!

benjamincanac · 2023-09-20T09:06:37Z

Thanks guys for you work! 😊

Use explicit label instead of implicit label

dc04327

vercel bot deployed to Preview September 9, 2023 07:15 View deployment

fix lint

8dc13bb

vercel bot deployed to Preview September 9, 2023 07:25 View deployment

aditio-eka changed the title ~~Use explicit label instead of implicit label~~ fix(FormGroup): Use explicit label instead of implicit label Sep 9, 2023

aditio-eka added 3 commits September 12, 2023 07:30

Merge branch 'dev' of github.com:aditio-eka/nuxt-ui into explicit-label

3cc93e5

auto generate label for

0b36cbd

fix lint

837dcc9

vercel bot deployed to Preview September 12, 2023 01:41 View deployment

benjamincanac closed this Sep 12, 2023

romhml reviewed Sep 12, 2023

View reviewed changes

remove id when labelFor has value

9095777

benjamincanac mentioned this pull request Sep 14, 2023

SelectMenu wrapped in FormGroup dosen't close on select #675

Closed

benjamincanac reopened this Sep 14, 2023

benjamincanac reviewed Sep 14, 2023

View reviewed changes

vercel bot deployed to Preview September 14, 2023 13:51 View deployment

aditio-eka added 2 commits September 14, 2023 22:04

Merge branch 'dev' of github.com:aditio-eka/nuxt-ui into explicit-label

10fea17

change labelFor value

c047495

vercel bot deployed to Preview September 14, 2023 15:18 View deployment

improve useFormGroup type

5d3e38b

vercel bot deployed to Preview September 14, 2023 15:35 View deployment

benjamincanac requested a review from romhml September 16, 2023 19:53

benjamincanac approved these changes Sep 16, 2023

View reviewed changes

romhml reviewed Sep 18, 2023

View reviewed changes

Prevent the name attribute from being overridden by UFormGroup.

b4cf2e1

vercel bot deployed to Preview September 18, 2023 14:20 View deployment

romhml reviewed Sep 18, 2023

View reviewed changes

Use a computed function to ensure that labelFor has an updated value

975d281

vercel bot deployed to Preview September 19, 2023 01:49 View deployment

revert

2b13d7b

vercel bot deployed to Preview September 19, 2023 13:29 View deployment

benjamincanac mentioned this pull request Sep 19, 2023

Bug when using vue-datepicker inside a UFormGroup #698

Closed

romhml approved these changes Sep 19, 2023

View reviewed changes

benjamincanac merged commit 681f0e5 into nuxt:dev Sep 20, 2023
2 checks passed

benjamincanac mentioned this pull request Sep 20, 2023

feat(module)!: use tailwind-merge for app.config & move config to components & type props #692

Merged

romhml mentioned this pull request Sep 20, 2023

chore(FormGroup): simplify bindings between input and form group p… #704

Merged

8 tasks

benjamincanac mentioned this pull request Sep 22, 2023

[USelectMenu] in [UFormGroup] doesn't closing #727

Closed

		@@ -93,13 +97,17 @@ export default defineComponent({

		const size = computed(() => ui.value.size[props.size ?? appConfig.ui.input.default.size])

		const labelFor = `label-for-${increment = increment < 1000000 ? increment + 1 : 0}`

	const formGroup = inject<InjectedFormGroupValue>('form-group')
	const formGroup = inject<InjectedFormGroupValue>('form-group', undefined)

	const labelFor = computed(() => `${props.name}-${increment = increment < 1000000 ? increment + 1 : 0}`)
	const labelFor = ref(`${props.name}-${increment = increment < 1000000 ? increment + 1 : 0}`)

fix(FormGroup): Use explicit label instead of implicit label #638

fix(FormGroup): Use explicit label instead of implicit label #638

Conversation

aditio-eka commented Sep 9, 2023 • edited by benjamincanac Loading

vercel bot commented Sep 9, 2023 • edited Loading

benjamincanac commented Sep 9, 2023

romhml commented Sep 10, 2023

aditio-eka commented Sep 11, 2023

benjamincanac commented Sep 11, 2023

aditio-eka commented Sep 11, 2023 • edited Loading

aditio-eka commented Sep 12, 2023

romhml commented Sep 12, 2023

romhml commented Sep 12, 2023

benjamincanac commented Sep 12, 2023

aditio-eka commented Sep 12, 2023 • edited Loading

romhml commented Sep 12, 2023

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

IsraelOrtuno commented Sep 13, 2023

benjamincanac commented Sep 14, 2023

romhml commented Sep 14, 2023

benjamincanac left a comment

Choose a reason for hiding this comment

benjamincanac commented Sep 14, 2023

aditio-eka commented Sep 14, 2023 • edited Loading

romhml left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

romhml Sep 18, 2023 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

romhml Sep 18, 2023 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

romhml Sep 19, 2023 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

romhml left a comment

Choose a reason for hiding this comment

aditio-eka commented Sep 20, 2023

benjamincanac commented Sep 20, 2023

aditio-eka commented Sep 9, 2023 •

edited by benjamincanac

Loading

vercel bot commented Sep 9, 2023 •

edited

Loading

aditio-eka commented Sep 11, 2023 •

edited

Loading

aditio-eka commented Sep 12, 2023 •

edited

Loading

aditio-eka commented Sep 14, 2023 •

edited

Loading

romhml Sep 18, 2023 •

edited

Loading

romhml Sep 18, 2023 •

edited

Loading

romhml Sep 19, 2023 •

edited

Loading