From 7196d81b4cecf1711a01bed5fed1236ab3b2398b Mon Sep 17 00:00:00 2001 From: Romain Hamel Date: Wed, 6 Dec 2023 17:15:05 +0100 Subject: [PATCH] fix(RadioGroup): props reactivity issues (#1065) --- src/runtime/components/forms/RadioGroup.vue | 2 +- src/runtime/composables/useFormGroup.ts | 5 +++-- 2 files changed, 4 insertions(+), 3 deletions(-) diff --git a/src/runtime/components/forms/RadioGroup.vue b/src/runtime/components/forms/RadioGroup.vue index fd20f4dd..c0cda3fc 100644 --- a/src/runtime/components/forms/RadioGroup.vue +++ b/src/runtime/components/forms/RadioGroup.vue @@ -99,7 +99,7 @@ export default defineComponent({ const { ui, attrs } = useUI('radioGroup', toRef(props, 'ui'), config, toRef(props, 'class')) const { ui: uiRadio } = useUI('radio', toRef(props, 'uiRadio'), configRadio) - const { emitFormChange, color, name } = useFormGroup({ ...props, isFieldset: true }, config) + const { emitFormChange, color, name } = useFormGroup(props, config) provide('radio-group', { color, name }) const onUpdate = (value: any) => { diff --git a/src/runtime/composables/useFormGroup.ts b/src/runtime/composables/useFormGroup.ts index 2fad9b06..e44de8aa 100644 --- a/src/runtime/composables/useFormGroup.ts +++ b/src/runtime/composables/useFormGroup.ts @@ -8,8 +8,8 @@ type InputProps = { size?: string | number | symbol color?: string name?: string - isFieldset?: boolean eagerValidation?: boolean + legend?: string | null } export const useFormGroup = (inputProps?: InputProps, config?: any) => { @@ -20,7 +20,8 @@ export const useFormGroup = (inputProps?: InputProps, config?: any) => { const inputId = ref(inputProps?.id) onMounted(() => { - inputId.value = inputProps?.isFieldset ? undefined : inputProps?.id ?? uid() + // Remove FormGroup label bindings for RadioGroup elements to avoid label conflicts + inputId.value = inputProps?.legend === null || inputProps.legend ? undefined : inputProps?.id ?? uid() if (formGroup) { // Updates for="..." attribute on label if inputProps.id is provided