Skip to content

FocusScope broken in React 18 StrictMode #3458

Closed
@RubenStoesser

Description

@RubenStoesser

🐛 Bug Report

The last update (v3.8.0) to @react-aria/focus has introduced code that breaks FocusScope when running in React 18 StrictMode.

Rendering a <FocusScope throws this error:

Cannot set properties of undefined (setting 'nodeToRestore')

The issue does not occur when StrictMode is not enabled or v3.7.0 of @react-aria/focus is used.

🤔 Expected Behavior

FocusScope should not throw an error when rendering.

😯 Current Behavior

Whenever a FocusScope is rendered in StrictMode an error is thrown:

Cannot set properties of undefined (setting 'nodeToRestore')

The error seems to be thrown when trying to assign focusScopeTree.getTreeNode(scopeRef).nodeToRestore in this useLayoutEffect:

💻 Code Sample

Example Code Sandbox using the example code from react-aria docs:

https://codesandbox.io/s/react-spectrum-template-forked-88lk5n?file=/src/App.js

To reproduce just click on the "open" button.

Note that when <StrictMode> is removed in the index.js file the error does not occur.
When the version of @react-aria/focus is changed to 3.7.0 the error also does not occur.

🌍 Your Environment

Software Version(s)
@react-aria/focus 3.8.0
Browser Chrome 104.0.5112.101
Operating System MacOS 12.5.1

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions