Fix breadcrumb rendering issue when overflow item is at last index

common/changes/office-ui-fabric-react/office-ui-fabric-react-4786_2018-05-05-07-40.json

@@ -0,0 +1,11 @@
+{
+  "changes": [
+    {
+      "packageName": "office-ui-fabric-react",
+      "comment": "Fix breadcrumb rendering issue when overflow index is at last",
+      "type": "patch"
+    }
+  ],
+  "packageName": "office-ui-fabric-react",
+  "email": "[email protected]"
+}

packages/office-ui-fabric-react/src/components/Breadcrumb/Breadcrumb.base.tsx

@@ -127,12 +127,13 @@ export class BreadcrumbBase extends BaseComponent<IBreadcrumbProps, any> {
     // Find index of last rendered item so the divider icon
     // knows not to render on that item
     const lastItemIndex = renderedItems.length - 1;
+    const hasOverflowItems = renderedOverflowItems && renderedOverflowItems.length !== 0;
 
     const itemElements: JSX.Element[] = renderedItems.map(
       (item, index) => (
         <li className={ this._classNames.listItem } key={ item.key || String(index) }>
           { onRenderItem(item, this._onRenderItem) }
-          { index !== lastItemIndex && (
+          { (index !== lastItemIndex || (hasOverflowItems && index === (overflowIndex! - 1))) && (
             <DividerType
               className={ this._classNames.chevron }
               iconName={ getRTL() ? 'ChevronLeft' : 'ChevronRight' }
@@ -142,7 +143,7 @@ export class BreadcrumbBase extends BaseComponent<IBreadcrumbProps, any> {
         </li>
       ));
 
-    if (renderedOverflowItems && renderedOverflowItems.length !== 0) {
+    if (hasOverflowItems) {
       itemElements.splice(overflowIndex!, 0, (
         <li className={ this._classNames.overflow } key={ OVERFLOW_KEY }>
           <IconButton
@@ -157,11 +158,13 @@ export class BreadcrumbBase extends BaseComponent<IBreadcrumbProps, any> {
               directionalHint: DirectionalHint.bottomLeftEdge
             } }
           />
-          <DividerType
-            className={ this._classNames.chevron }
-            iconName={ getRTL() ? 'ChevronLeft' : 'ChevronRight' }
-            item={ renderedOverflowItems[renderedOverflowItems.length - 1] }
-          />
+          { overflowIndex !== lastItemIndex + 1 && (
+            <DividerType
+              className={ this._classNames.chevron }
+              iconName={ getRTL() ? 'ChevronLeft' : 'ChevronRight' }
+              item={ renderedOverflowItems[renderedOverflowItems.length - 1] }
+            />
+          ) }
         </li>
       ));
     }

packages/office-ui-fabric-react/src/components/Breadcrumb/Breadcrumb.test.tsx

@@ -74,6 +74,34 @@ describe('Breadcrumb', () => {
       const tree = component.toJSON();
       expect(tree).toMatchSnapshot();
     });
+
+    it('renders breadcumb correctly 5', () => {
+      // With maxDisplayedItems and overflowIndex
+      const component = renderer.create(
+        <Breadcrumb
+          items={ items }
+          maxDisplayedItems={ 1 }
+          overflowIndex={ 1 }
+        />
+      );
+
+      const tree = component.toJSON();
+      expect(tree).toMatchSnapshot();
+    });
+
+    it('renders breadcumb correctly 6', () => {
+      // With maxDisplayedItems and overflowIndex as 0
+      const component = renderer.create(
+        <Breadcrumb
+          items={ items }
+          maxDisplayedItems={ 0 }
+          overflowIndex={ 0 }
+        />
+      );
+
+      const tree = component.toJSON();
+      expect(tree).toMatchSnapshot();
+    });
   });
 
   it('can call the callback when an item is clicked', () => {