FocusScope: If a focused element unmounts, focus moves to body, breaking focus containment #874

davidhousedev · 2020-07-31T17:39:05Z

🐛 Bug Report

FocusScope exhibits confusing behavior when a focused element unmounts, potentially allowing focus to travel outside of a FocusScope even when contain is set to true.

🤔 Expected Behavior

I would expect that when a focused element is unmounted, focus travels to a different element within the FocusScope, when contain is true.

😯 Current Behavior

When a focus element within a FocusScope unmounts, focus travels to <body> rather than another element within the focus scope.

🔦 Context

I am implementing a modal that renders a form with radio buttons on mount. Prior to the radio buttons being returned from the fetch, I show a loading indicator. I attempted to use the loading indicator as the focus target for the modal, assuming that when the loading indicator unmounts then the first form option would be rendered. Instead, focus traveled to body which is outside of my FocusScope.

💻 Code Sample

Sandbox with issue reproduced: https://codesandbox.io/s/thirsty-mahavira-dof7z?file=/src/App.js

Code in case sandbox becomes unavailable:

import React from "react";
import { FocusScope } from "@react-aria/focus";

export default function App() {
  const [focused, setFocused] = React.useState();
  const [buttonIsVisible, setButtonIsVisible] = React.useState(true);

  React.useEffect(() => {
    window.addEventListener(
      "DOMSubtreeModified",
      () => {
        setFocused(document.activeElement.tagName);
      },
      true
    );

    window.addEventListener(
      "blur",
      () => {
        setFocused(document.activeElement.tagName);
      },
      true
    );

    window.addEventListener(
      "focus",
      () => {
        setFocused(document.activeElement.tagName);
      },
      true
    );
  }, []);

  return (
    <div className="App">
      <FocusScope contain>
        <h1>Focused Element Tag: {focused}</h1>
        <button>Focus me next please</button>
        {buttonIsVisible && (
          <button
            onClick={() => {
              setButtonIsVisible(false);
            }}
          >
            Press me to delete me
          </button>
        )}
      </FocusScope>
    </div>
  );
}

🌍 Your Environment

Software	Version(s)
react-spectrum	"@react-aria/focus": "^3.1.0"
Browser	Chrome: 84.0.4147.105
Operating System	MacOS 10.15.5

🧢 Your Company/Team

ButcherBox/Engineering

The text was updated successfully, but these errors were encountered:

devongovett · 2020-08-01T02:12:15Z

Thanks for reporting! Where would you expect focus to go in your case? To the next focusable element after the button that was deleted? What if there is no focusable element inside the scope anymore? Feels like it may be challenging to answer those questions in a general way...

davidhousedev · 2020-08-04T13:58:54Z

I think at a baseline, I would expect for the FocusScope to contain focus so long as it contains another focus-able element. The least surprising behavior here would probably be for the next element in the focus order to be focused. I think if there were no focus-able elements within the scope, then it probably makes sense for focus to break out of the scope in some way.

Thanks so much for your work on this! Your components are life-savers for our team :)

AleshaOleg · 2021-04-06T09:56:30Z

Is anybody started to work on this? I can try to handle this in 2-3, just want to know if anybody tried to implement this, so I can just continue not from 0, or any tips/comments would be useful too. Thanks!

LFDanLu · 2021-04-07T17:53:38Z

@AleshaOleg I don't believe anyone has picked this up yet, feel free to give it a shot! I think it would be a good idea to first come to an agreement for the expected behavior first. IMO I think shifting the focus to the next element in focus order makes sense if it exists, but the question of where the focus should go if there are no focusable elements within the scope still stands. Perhaps in that case it should break out of focus containment and focus the body? Or should it find the last focusable element prior to the one that unmounted? Any suggestions?

snowystinger · 2021-04-08T19:27:06Z

a thought i had on this is that if focus moves forward, the user may not know what was next, so they may think they’ve been dumped somewhere random. would it make more sense for focus to go to the previous item? presumably where they came from? unless of course they were shift tabbing. I don't know if it makes sense to build up a stack of where the user has been in terms of focus, that could get hard to manage.
The application may need to decide/track this

majornista · 2021-04-08T19:57:48Z

The principal use case for which I'd like to see a solution is a dialog opened from a popover, like a menu, that closes when the dialog opens, where closing the FocusScope for the dialog expects to restore focus to an element that no longer exists. For this I think we need a stack of FocusScopes that can be updated when a scope is removed, so that closing the top scope always restores focus to an element that exists in the previous scope.

A secondary use case would be for elements in the same scope where the item that has focus can be removed, losing focus to the document body, like a Tag list of keywords for filtering, or items in a collection that can be removed by clicking a button in the item. FocusScope may or may not need to account for this, because focus management when an item is removed might best be handled by the TagList or Collection, setting focus to the previous or next item if one exists. I'm less inclined to arbitrarily set focus to the next or previous tabbable element in the DOM, which may be a different, unrelated element type.

majornista · 2023-02-23T23:49:39Z

Possibly resolved by #3323

snowystinger · 2023-09-04T23:34:31Z

I've confirmed, this has been fixed in recent releases.

devongovett added the enhancement New feature or request label Aug 1, 2020

LFDanLu mentioned this issue Jun 22, 2021

FocusScope: containment broken when active & last focusable element becomes disabled #2038

Closed

majornista mentioned this issue Oct 13, 2021

FocusScope fails to restore focus when the element to restore has unmounted #2444

Closed

devongovett mentioned this issue Aug 10, 2022

Fix no blur called on activeelement removed from dom #3393

Closed

5 tasks

snowystinger closed this as completed Sep 4, 2023

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

FocusScope: If a focused element unmounts, focus moves to body, breaking focus containment #874

FocusScope: If a focused element unmounts, focus moves to body, breaking focus containment #874

davidhousedev commented Jul 31, 2020

devongovett commented Aug 1, 2020

davidhousedev commented Aug 4, 2020

AleshaOleg commented Apr 6, 2021

LFDanLu commented Apr 7, 2021

snowystinger commented Apr 8, 2021

majornista commented Apr 8, 2021 •

edited

Loading

majornista commented Feb 23, 2023

snowystinger commented Sep 4, 2023

FocusScope: If a focused element unmounts, focus moves to body, breaking focus containment #874

FocusScope: If a focused element unmounts, focus moves to body, breaking focus containment #874

Comments

davidhousedev commented Jul 31, 2020

🐛 Bug Report

🤔 Expected Behavior

😯 Current Behavior

🔦 Context

💻 Code Sample

🌍 Your Environment

🧢 Your Company/Team

devongovett commented Aug 1, 2020

davidhousedev commented Aug 4, 2020

AleshaOleg commented Apr 6, 2021

LFDanLu commented Apr 7, 2021

snowystinger commented Apr 8, 2021

majornista commented Apr 8, 2021 • edited Loading

majornista commented Feb 23, 2023

snowystinger commented Sep 4, 2023

majornista commented Apr 8, 2021 •

edited

Loading