fix(RadioGroup): id prop

.changeset/radiogroup-id-prop-fix.md

@@ -0,0 +1,6 @@
+---
+'@cube-dev/ui-kit': patch
+---
+
+Fixed `id` and ARIA attributes duplication where they were incorrectly applied to both the field wrapper and the input element. The `id` prop is now correctly applied only to the element with `qa` and `data-input-type` attributes. The fix was implemented in the `wrapWithField` helper to automatically filter out `id` from `fieldProps` passed to the Field wrapper.
+

src/components/fields/Checkbox/CheckboxGroup.tsx

@@ -66,6 +66,7 @@ function CheckboxGroup(props: WithNullableValue<CubeCheckboxGroupProps>, ref) {
   });
 
   let {
+    id,
     isDisabled,
     isRequired,
     necessityIndicator,
@@ -94,6 +95,7 @@ function CheckboxGroup(props: WithNullableValue<CubeCheckboxGroupProps>, ref) {
 
   let radioGroup = (
     <CheckGroupElement
+      id={id}
       styles={inputStyles}
       mods={{
         horizontal: orientation === 'horizontal',

src/components/fields/ComboBox/ComboBox.tsx

@@ -1860,7 +1860,7 @@ export const ComboBox = forwardRef(function ComboBox<T extends object>(
   return wrapWithField<Omit<CubeComboBoxProps<T>, 'children'>>(
     comboBoxField,
     ref,
-    mergeProps(finalProps, {}),
+    finalProps,
   );
 }) as unknown as (<T>(
   props: CubeComboBoxProps<T> & { ref?: ForwardedRef<HTMLDivElement> },

src/components/fields/DatePicker/DatePicker.tsx

@@ -127,6 +127,7 @@ function DatePicker<T extends DateValue>(
       isDisabled={isDisabled}
       validationState={validationState}
       size={size}
+      fieldProps={groupProps}
       {...focusProps}
       suffix={
         <DialogTrigger
@@ -172,7 +173,6 @@ function DatePicker<T extends DateValue>(
     ...props,
     styles,
     labelProps: mergeProps(props.labelProps, labelProps),
-    fieldProps: groupProps,
   });
 }
 

src/components/fields/DatePicker/DateRangePicker.tsx

@@ -139,6 +139,7 @@ function DateRangePicker<T extends DateValue>(
       isDisabled={isDisabled}
       validationState={validationState}
       size={size}
+      fieldProps={groupProps}
       {...focusProps}
       suffix={
         <DialogTrigger
@@ -200,7 +201,6 @@ function DateRangePicker<T extends DateValue>(
     ...props,
     styles,
     labelProps: mergeProps(props.labelProps, labelProps),
-    fieldProps: groupProps,
   });
 }
 

src/components/fields/DatePicker/DateRangeSeparatedPicker.tsx

@@ -182,6 +182,7 @@ function DateRangeSeparatedPicker<T extends DateValue>(
   const component = (
     <DatePickerElement
       ref={targetRef}
+      {...groupProps}
       styles={props.wrapperStyles}
       qa={qa || 'DateRangeSeparatedPicker'}
       data-input-type="daterangeseparatedpicker"
@@ -310,7 +311,6 @@ function DateRangeSeparatedPicker<T extends DateValue>(
     ...props,
     styles,
     labelProps: mergeProps(props.labelProps, labelProps),
-    fieldProps: groupProps,
   });
 }
 

src/components/fields/FilterListBox/FilterListBox.tsx

@@ -958,7 +958,7 @@ export const FilterListBox = forwardRef(function FilterListBox<
   return wrapWithField<Omit<CubeFilterListBoxProps<T>, 'children'>>(
     filterListBoxField,
     ref,
-    mergeProps(finalProps, {}),
+    finalProps,
   );
 }) as unknown as (<T>(
   props: CubeFilterListBoxProps<T> & { ref?: ForwardedRef<HTMLDivElement> },

src/components/fields/FilterPicker/FilterPicker.tsx

@@ -953,14 +953,13 @@ export const FilterPicker = forwardRef(function FilterPicker<T extends object>(
 
   const finalProps = {
     ...props,
-    children: undefined,
     styles: undefined,
   };
 
   return wrapWithField<Omit<CubeFilterPickerProps<T>, 'children' | 'tooltip'>>(
     filterPickerField,
     ref as any,
-    mergeProps(finalProps, {}),
+    finalProps,
   );
 }) as unknown as (<T>(
   props: CubeFilterPickerProps<T> & { ref?: ForwardedRef<HTMLElement> },

src/components/fields/ListBox/ListBox.tsx

@@ -1034,7 +1034,7 @@ export const ListBox = forwardRef(function ListBox<T extends object>(
   return wrapWithField<Omit<CubeListBoxProps<T>, 'children'>>(
     listBoxField,
     ref,
-    mergeProps(finalProps, {}),
+    finalProps,
   );
 }) as unknown as (<T>(
   props: CubeListBoxProps<T> & { ref?: ForwardedRef<HTMLDivElement> },

src/components/fields/Picker/Picker.tsx

@@ -764,14 +764,10 @@ export const Picker = forwardRef(function Picker<T extends object>(
   return wrapWithField<Omit<CubePickerProps<T>, 'children' | 'tooltip'>>(
     pickerField,
     ref as any,
-    mergeProps(
-      {
-        ...props,
-        children: undefined,
-        styles: undefined,
-      },
-      {},
-    ),
+    {
+      ...props,
+      styles: undefined,
+    },
   );
 }) as unknown as (<T>(
   props: CubePickerProps<T> & { ref?: ForwardedRef<HTMLElement> },

src/components/fields/RadioGroup/RadioGroup.tsx

@@ -88,6 +88,7 @@ function RadioGroup(props: WithNullableValue<CubeRadioGroupProps>, ref) {
 
   let {
     qa,
+    id,
     isDisabled,
     isRequired,
     labelPosition = 'top',
@@ -123,6 +124,7 @@ function RadioGroup(props: WithNullableValue<CubeRadioGroupProps>, ref) {
 
   let radioGroup = (
     <RadioGroupElement
+      id={id}
       qa={qa || 'RadioGroup'}
       styles={styles}
       data-input-type="radiogroup"

src/components/fields/Slider/SliderBase.tsx

@@ -205,6 +205,7 @@ function SliderBase(allProps: SliderBaseProps, ref: DOMRef<HTMLDivElement>) {
   const sliderField = (
     <SliderElement
       ref={domRef}
+      id={props.id}
       {...groupProps}
       mods={mods}
       styles={styles}
@@ -222,7 +223,6 @@ function SliderBase(allProps: SliderBaseProps, ref: DOMRef<HTMLDivElement>) {
 
   return wrapWithField(sliderField, ref, {
     ...props,
-    children: undefined,
     // styles,
     extra,
     labelProps: mergeProps(labelProps, userLabelProps),

src/components/form/wrapper.tsx

@@ -43,6 +43,9 @@ export function wrapWithField<T extends WrapWithFieldProps>(
     return component;
   }
 
+  // Remove id from fieldProps to avoid duplication (id should be on the input element, not the field wrapper)
+  const { id: _, ...fieldPropsWithoutId } = fieldProps || {};
+
   return (
     <FieldWrapper
       {...{
@@ -54,7 +57,7 @@ export function wrapWithField<T extends WrapWithFieldProps>(
         isDisabled,
         necessityIndicator,
         labelProps,
-        fieldProps,
+        fieldProps: fieldPropsWithoutId,
         message,
         messageStyles,
         description,