Breadcrumbs fails to render with single child and showRoot (#2927)

* fixes(#2923): breadcrumbs fails to render with single child and showRoot=true

* fixes(#2923): breadcrumbs fails to render with single child and showRoot=true

* fixes(#2923): breadcrumbs fails to render with single child and showRoot=true -- added tests

Co-authored-by: Danni <[email protected]>
Co-authored-by: Daniel Lu <[email protected]>

Author: 3 people

packages/@react-spectrum/breadcrumbs/src/Breadcrumbs.tsx

@@ -88,16 +88,18 @@ function Breadcrumbs<T>(props: SpectrumBreadcrumbsProps<T>, ref: DOMRef) {
         listItems.pop();
         newVisibleItems++;
       } else {
-        // Ensure the last breadcrumb isn't truncated when we measure it.
-        let last = listItems.pop();
-        last.style.overflow = 'visible';
+        if (listItems.length > 0) {
+          // Ensure the last breadcrumb isn't truncated when we measure it.
+          let last = listItems.pop();
+          last.style.overflow = 'visible';
 
-        calculatedWidth += last.offsetWidth;
-        if (calculatedWidth < containerWidth) {
-          newVisibleItems++;
-        }
+          calculatedWidth += last.offsetWidth;
+          if (calculatedWidth < containerWidth) {
+            newVisibleItems++;
+          }
 
-        last.style.overflow = '';
+          last.style.overflow = '';
+        }
       }
 
       for (let breadcrumb of listItems.reverse()) {

packages/@react-spectrum/breadcrumbs/stories/Breadcrumbs.stories.tsx

@@ -136,6 +136,13 @@ storiesOf('Breadcrumbs', module)
         <Item>Root</Item>
       </Breadcrumbs>
     )
+  ).add(
+    'Only one item, showRoot',
+    () => (
+      <Breadcrumbs showRoot>
+        <Item key="Root-1">Root</Item>
+      </Breadcrumbs>
+    )
   );
 
 function render(props = {}) {

packages/@react-spectrum/breadcrumbs/test/Breadcrumbs.test.js

@@ -80,6 +80,17 @@ describe('Breadcrumbs', function () {
     expect(item3).toHaveAttribute('aria-current', 'page');
   });
 
+  it('Handles single item and showRoot', () => {
+    let {getByText} = render(
+      <Breadcrumbs showRoot>
+        <Item key="Folder-1">Folder 1</Item>
+      </Breadcrumbs>
+    );
+    let item = getByText('Folder 1');
+    expect(item).toBeTruthy();
+    expect(item.tabIndex).toBe(-1);
+  });
+
   it('Should handle forward ref', function () {
     let ref;
     let Component = () => {