Skip to content

Commit 544cb84

Browse files
Fix React warning in ButtonGroup
This change fixes the following issue: ButtonGroup was adding positionInGroup to all children rather than just Buttons. For example, in the following, both the Buttons and the child spans get positionInGroup props: ``` <Button.Group><Button><span>b1</span></Button><Button><span>b2</span></Button></Button.Group> ``` This results in a React warning: “Warning: React does not recognize the `positionInGroup` prop on a DOM element...” The review comment in the original code change causing this hints at this issue as well: #1273 (comment)
1 parent c2fb19a commit 544cb84

File tree

1 file changed

+5
-4
lines changed

1 file changed

+5
-4
lines changed

packages/ui/src/components/Button/ButtonGroup.tsx

+5-4
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import { twMerge } from "tailwind-merge";
44
import { mergeDeep } from "../../helpers/merge-deep";
55
import { getTheme } from "../../theme-store";
66
import type { DeepPartial } from "../../types";
7-
import type { ButtonProps } from "../Button";
7+
import { Button, type ButtonProps } from "../Button";
88

99
export interface FlowbiteButtonGroupTheme {
1010
base: string;
@@ -29,27 +29,28 @@ const processChildren = (
2929
): ReactNode => {
3030
return Children.map(children as ReactElement<ButtonProps>[], (child, index) => {
3131
if (isValidElement(child)) {
32+
const positionInGroupProp = (child.type == Button) ? { positionInGroup: determinePosition(index, Children.count(children)) } : {};
3233
// Check if the child has nested children
3334
if (child.props.children) {
3435
// Recursively process nested children
3536
return cloneElement(child, {
3637
...child.props,
3738
children: processChildren(child.props.children, outline, pill),
38-
positionInGroup: determinePosition(index, Children.count(children)),
39+
...positionInGroupProp
3940
});
4041
} else {
4142
return cloneElement(child, {
4243
outline,
4344
pill,
44-
positionInGroup: determinePosition(index, Children.count(children)),
45+
...positionInGroupProp
4546
});
4647
}
4748
}
4849
return child;
4950
});
5051
};
5152

52-
const determinePosition = (index: number, totalChildren: number) => {
53+
const determinePosition = (index: number, totalChildren: number): keyof PositionInButtonGroup => {
5354
return index === 0 ? "start" : index === totalChildren - 1 ? "end" : "middle";
5455
};
5556

0 commit comments

Comments
 (0)