Skip to content

usePopover error when using React 18's new render function #3958

@ashleyryan

Description

@ashleyryan

🐛 Bug Report

When copying the examples from usePopover on the website into an app that uses the new React 18 createRoot/render functions, the popover fails to open and instead throws an error: Cannot set properties of undefined (setting 'nodeToRestore')

The popover does open as expected with the old React 17 style ReactDOM.render function

🤔 Expected Behavior

The popover should open

😯 Current Behavior

Here's an example in stackblitz: https://stackblitz.com/edit/react-ts-ebilqa?file=index.tsx

Reproduction:

  1. Click Button
  2. Notice the error on the screen
  3. Uncomment out the old rendering in index.tsx, and comment out the react 18 style render
  4. Click the button and notice the popover opens

🔦 Context

I'm migrating from Reach-UI to react-aria because reach ui doesn't have React 18 support. I'm not using the new style render yet, but ran into the issue when I was trying to demo some basic functionality in stackblitz.

💻 Code Sample

Here's an example in stackblitz: https://stackblitz.com/edit/react-ts-ebilqa?file=index.tsx

react-aria 3.22.0

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type
    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions