Add missing id prop to group heading

csandman · Oct 19, 2023 · 9994d43 · 9994d43
1 parent 2df5e1d
commit 9994d43
Showing 1 changed file with 9 additions and 5 deletions.
diff --git a/src/chakra-components/menu.tsx b/src/chakra-components/menu.tsx
@@ -14,7 +14,7 @@ import type {
   OptionProps,
 } from "react-select";
 import type { SizeProps, ThemeObject } from "../types";
-import { useSize } from "../utils";
+import { cleanCommonProps, useSize } from "../utils";
 
 const alignToControl = (placement: CoercedMenuPlacement) => {
   const placementToCSSProp = { bottom: "top", top: "bottom" };
@@ -290,7 +290,9 @@ export const GroupHeading = <
 >(
   props: GroupHeadingProps<Option, IsMulti, Group>
 ) => {
-  const { cx, className, children, selectProps } = props;
+  const { cx, className, selectProps } = props;
+
+  const { data, ...innerProps } = cleanCommonProps(props);
 
   const { chakraStyles, size: sizeProp } = selectProps;
 
@@ -324,9 +326,11 @@ export const GroupHeading = <
     : initialSx;
 
   return (
-    <Box className={cx({ "group-heading": true }, className)} sx={sx}>
-      {children}
-    </Box>
+    <Box
+      {...innerProps}
+      className={cx({ "group-heading": true }, className)}
+      sx={sx}
+    />
   );
 };