Merge pull request #5173 from matuzalemsteles/issue-5169

fix(@clayui/tabs): fix error when trying to clone an invalid element

packages/clay-tabs/src/Content.tsx

@@ -15,7 +15,7 @@ export interface IProps extends React.HTMLAttributes<HTMLDivElement> {
  /**
  * Children elements received from ClayTabs.Content component.
  */
- children: Array<React.ReactElement>;
+ children: React.ReactNode;
 
  /**
  * Flag to indicate if `fade` classname that applies an fading animation should be applied.
@@ -33,15 +33,16 @@ const Content = ({
  return (
  <div className={classNames('tab-content', className)} {...otherProps}>
  {React.Children.map(children, (child, index) => {
- return (
- child &&
- React.cloneElement(child, {
- ...child.props,
- active: activeIndex === index,
- fade,
- key: index,
- })
- );
+ if (!React.isValidElement(child)) {
+ return child;
+ }
+
+ return React.cloneElement(child, {
+ ...child.props,
+ active: activeIndex === index,
+ fade,
+ key: index,
+ });
  })}
  </div>
  );

packages/clay-tabs/src/__tests__/index.tsx

@@ -148,4 +148,28 @@ describe('ClayTabs', () => {
  fireEvent.click(tabItems[1]);
  expect(onClick).toBeCalled();
  });
+
+ it('renders elements not valid tabs should continue to work', () => {
+ const {getAllByRole} = render(
+ <>
+ <ClayTabs>
+ {false && <ClayTabs.Item active>One</ClayTabs.Item>}
+ <ClayTabs.Item>Two</ClayTabs.Item>
+ </ClayTabs>
+ <ClayTabs.Content activeIndex={1}>
+ {false && <ClayTabs.TabPane>Content One</ClayTabs.TabPane>}
+ <ClayTabs.TabPane>Content Two</ClayTabs.TabPane>
+ </ClayTabs.Content>
+ </>
+ );
+
+ const tabItems = getAllByRole('tab');
+ const tabPanels = getAllByRole('tabpanel');
+
+ expect(tabItems[0].innerHTML).toBe('Two');
+ expect(tabItems.length).toBe(1);
+
+ expect(tabPanels[0].innerHTML).toBe('Content Two');
+ expect(tabPanels.length).toBe(1);
+ });
 });

packages/clay-tabs/src/index.tsx

@@ -145,8 +145,12 @@ function ClayTabs({
  ref={tabsRef}
  role="tablist"
  >
- {React.Children.map(children, (child, index) =>
- React.cloneElement(child as React.ReactElement, {
+ {React.Children.map(children, (child, index) => {
+ if (!React.isValidElement(child)) {
+ return child;
+ }
+
+ return React.cloneElement(child as React.ReactElement, {
  active:
  (child as React.ReactElement).props.active !== undefined
  ? (child as React.ReactElement).props.active
@@ -162,8 +166,8 @@ function ClayTabs({
  setActive(index);
  }
  },
- })
- )}
+ });
+ })}
  </ul>
  );
 }