add test case

mui · Apr 10, 2020 · 8025004 · 8025004
1 parent 33d9bac
commit 8025004
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 4 deletions.
diff --git a/packages/material-ui/src/Breadcrumbs/Breadcrumbs.js b/packages/material-ui/src/Breadcrumbs/Breadcrumbs.js
@@ -65,7 +65,13 @@ const Breadcrumbs = React.forwardRef(function Breadcrumbs(props, ref) {
   const renderItemsBeforeAndAfter = (allItems) => {
     const handleClickExpand = (event) => {
       setExpanded(true);
-      event.currentTarget.parentNode.querySelector('a').focus();
+
+      // The clicked element received the focus but gets removed from the DOM.
+      // Let's keep the focus in the component after expanding.
+      const focusable = event.currentTarget.parentNode.querySelector('a[href],button,[tabindex]');
+      if (focusable) {
+        focusable.focus();
+      }
     };
 
     // This defends against someone passing weird input, to ensure that if all

diff --git a/packages/material-ui/src/Breadcrumbs/Breadcrumbs.test.js b/packages/material-ui/src/Breadcrumbs/Breadcrumbs.test.js
@@ -64,9 +64,9 @@ describe('<Breadcrumbs />', () => {
   });
 
   it('should expand when `BreadcrumbCollapsed` is clicked', () => {
-    const { getAllByRole, getByRole } = render(
+    const { getAllByRole, getByRole, getByText } = render(
       <Breadcrumbs>
-        <span>first</span>
+        <span tabIndex="-1">first</span>
         <span>second</span>
         <span>third</span>
         <span>fourth</span>
@@ -79,7 +79,7 @@ describe('<Breadcrumbs />', () => {
     );
 
     getByRole('button').click();
-
+    expect(document.activeElement).to.equal(getByText('first'));
     expect(getAllByRole('listitem', { hidden: false })).to.have.length(9);
   });