Skip to content

Commit

Permalink
Fix React warning in ButtonGroup (#1323)
Browse files Browse the repository at this point in the history
* 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)

* fix formatting
  • Loading branch information
chunkerchunker committed Jun 19, 2024
1 parent c580a26 commit 50c860e
Showing 1 changed file with 6 additions and 4 deletions.
10 changes: 6 additions & 4 deletions packages/ui/src/components/Button/ButtonGroup.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ import { twMerge } from "tailwind-merge";
import { mergeDeep } from "../../helpers/merge-deep";
import { getTheme } from "../../theme-store";
import type { DeepPartial } from "../../types";
import type { ButtonProps } from "../Button";
import { Button, type ButtonProps } from "../Button";

export interface FlowbiteButtonGroupTheme {
base: string;
Expand All @@ -29,27 +29,29 @@ const processChildren = (
): ReactNode => {
return Children.map(children as ReactElement<ButtonProps>[], (child, index) => {
if (isValidElement(child)) {
const positionInGroupProp =
child.type == Button ? { positionInGroup: determinePosition(index, Children.count(children)) } : {};
// Check if the child has nested children
if (child.props.children) {
// Recursively process nested children
return cloneElement(child, {
...child.props,
children: processChildren(child.props.children, outline, pill),
positionInGroup: determinePosition(index, Children.count(children)),
...positionInGroupProp,
});
} else {
return cloneElement(child, {
outline,
pill,
positionInGroup: determinePosition(index, Children.count(children)),
...positionInGroupProp,
});
}
}
return child;
});
};

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

Expand Down

0 comments on commit 50c860e

Please sign in to comment.