diff --git a/common/changes/office-ui-fabric-react/Fix-PivotItems_2019-03-27-19-38.json b/common/changes/office-ui-fabric-react/Fix-PivotItems_2019-03-27-19-38.json new file mode 100644 index 0000000000000..b30964b95adf0 --- /dev/null +++ b/common/changes/office-ui-fabric-react/Fix-PivotItems_2019-03-27-19-38.json @@ -0,0 +1,11 @@ +{ + "changes": [ + { + "packageName": "office-ui-fabric-react", + "comment": "Fixed a problem with Pivot showing the wrong PivotItems when using JSX expressions. Extended the test case", + "type": "patch" + } + ], + "packageName": "office-ui-fabric-react", + "email": "sebastian.mattar@gmail.com" +} \ No newline at end of file diff --git a/packages/office-ui-fabric-react/src/components/Pivot/Pivot.base.tsx b/packages/office-ui-fabric-react/src/components/Pivot/Pivot.base.tsx index cba67dca63de4..67a25d0473881 100644 --- a/packages/office-ui-fabric-react/src/components/Pivot/Pivot.base.tsx +++ b/packages/office-ui-fabric-react/src/components/Pivot/Pivot.base.tsx @@ -207,12 +207,7 @@ export class PivotBase extends BaseComponent { keyToTabIdMapping: {} }; - React.Children.map(props.children, (child: any, index: number) => { - // skip empty JSX expressions - if (!child) { - return; - } - + React.Children.map(React.Children.toArray(props.children), (child: any, index: number) => { if (typeof child === 'object' && child.type === PivotItemType) { const pivotItem = child as PivotItem; const { linkText, ...pivotItemProps } = pivotItem.props; diff --git a/packages/office-ui-fabric-react/src/components/Pivot/Pivot.test.tsx b/packages/office-ui-fabric-react/src/components/Pivot/Pivot.test.tsx index f82f803936685..99fd13217b158 100644 --- a/packages/office-ui-fabric-react/src/components/Pivot/Pivot.test.tsx +++ b/packages/office-ui-fabric-react/src/components/Pivot/Pivot.test.tsx @@ -24,9 +24,14 @@ describe('Pivot', () => { it('supports JSX expressions', () => { const component = renderer.create( - - - {false && } + + +
This is item 1
+
+ {false && } + +
This is Item 3
+
); const tree = component.toJSON(); diff --git a/packages/office-ui-fabric-react/src/components/Pivot/__snapshots__/Pivot.test.tsx.snap b/packages/office-ui-fabric-react/src/components/Pivot/__snapshots__/Pivot.test.tsx.snap index f1ace6341166c..f3494647ef605 100644 --- a/packages/office-ui-fabric-react/src/components/Pivot/__snapshots__/Pivot.test.tsx.snap +++ b/packages/office-ui-fabric-react/src/components/Pivot/__snapshots__/Pivot.test.tsx.snap @@ -2733,6 +2733,155 @@ exports[`Pivot supports JSX expressions 1`] = ` } role="tablist" > +