fix: id prop handling in field components

Author: tenphi

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

@@ -2,5 +2,5 @@
 '@cube-dev/ui-kit': patch
 ---
 
-Fixed RadioGroup `id` prop to be applied to the root element instead of the field wrapper
+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> },