diff --git a/packages/fast-components-react-base/src/tabs/tabs.tsx b/packages/fast-components-react-base/src/tabs/tabs.tsx index 6970a172bd1..693c1b89bf3 100644 --- a/packages/fast-components-react-base/src/tabs/tabs.tsx +++ b/packages/fast-components-react-base/src/tabs/tabs.tsx @@ -14,6 +14,7 @@ import React from "react"; import { DisplayNamePrefix } from "../utilities"; import Tab, { TabManagedClasses } from "./tab"; import TabItem from "./tab-item"; +import { isNil } from "lodash-es"; import TabPanel, { TabPanelManagedClasses } from "./tab-panel"; import { TabsHandledProps, TabsItem, TabsProps, TabsUnhandledProps } from "./tabs.props"; @@ -411,7 +412,9 @@ class Tabs extends Foundation { children: React.ReactNode, slot: TabsSlot | string ): React.ReactNode { - const childBySlot: React.ReactNode = this.withSlot(slot, children); + const childBySlot: React.ReactNode = this.filterChildren( + this.withSlot(slot, children) + ); return slot !== this.getSlot(TabsSlot.tabItem) ? childBySlot @@ -423,6 +426,19 @@ class Tabs extends Foundation { ); } + /** + * Need to filter out none truthy results for Preact. + * Can remove if below gets merged in. + * https://github.com/preactjs/preact-compat/pull/461 + */ + private filterChildren(nodes: React.ReactNode): React.ReactNode { + if (Array.isArray(nodes)) { + return nodes.filter(Boolean); + } else { + return nodes; + } + } + /** * Return a tab item if it has a tab and tab panel */