[Breadcrumbs] Keep focus in the component after expanding (#20489)

mui · Apr 10, 2020 · 991f6af · 991f6af
1 parent 89d7ad0
commit 991f6af
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 4 deletions.
diff --git a/packages/material-ui/src/Breadcrumbs/Breadcrumbs.js b/packages/material-ui/src/Breadcrumbs/Breadcrumbs.js
@@ -63,8 +63,15 @@ const Breadcrumbs = React.forwardRef(function Breadcrumbs(props, ref) {
   const [expanded, setExpanded] = React.useState(false);
 
   const renderItemsBeforeAndAfter = (allItems) => {
-    const handleClickExpand = () => {
+    const handleClickExpand = (event) => {
       setExpanded(true);
+
+      // 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);
   });