Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Inserter: search field autoFocus breaks withFocusReturn #1917

Closed
afercia opened this issue Jul 16, 2017 · 0 comments
Closed

Inserter: search field autoFocus breaks withFocusReturn #1917

afercia opened this issue Jul 16, 2017 · 0 comments
Labels
[Focus] Accessibility (a11y) Changes that impact accessibility and need corresponding review (e.g. markup changes). [Type] Bug An existing feature does not function as intended

Comments

@afercia
Copy link
Contributor

afercia commented Jul 16, 2017

The inserter was recently modified to have the search field as first thing in the inserter content and set initial focus on the search field using autoFocus.

Turns out this breaks the way withFocusReturn works. To reproduce:

  • open the inserter using the keyboard
  • observe the search field gets auto-focused
  • tab inside the inserter menu
  • press Escape
  • focus is not moved back to the inserter toggle button

Setting focus on a component when it gets mounted is not compatible with how withFocusReturn gets the document.activeElement on componentDidMount. In this case, when the inserter menu gets mounted, the document.activeElement is the search field. Tested in Chrome and Firefox on macOS, this.activeElement in withFocusReturn actually returns the search field.

Question: why getting the active element on componentDidMount? Using componentWillMount would probably solve the issue. /cc @aduth

@afercia afercia added [Focus] Accessibility (a11y) Changes that impact accessibility and need corresponding review (e.g. markup changes). [Type] Bug An existing feature does not function as intended labels Jul 16, 2017
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
[Focus] Accessibility (a11y) Changes that impact accessibility and need corresponding review (e.g. markup changes). [Type] Bug An existing feature does not function as intended
Projects
None yet
Development

No branches or pull requests

1 participant