Skip to content

Some components don't render on second route change #2848

Closed
@cd-a

Description

@cd-a

🐛 Bug Report

Using a specific hook from react-fire breaks the rendering of some list based components, but only on second time rendering the routes

🤔 Expected Behavior

The rendering of components should not be affected.

😯 Current Behavior

Page one has no react-fire wired up, Page two does.

The first render or route render is all the same. But switching routes, the subsequent renders with react-fire break some components from displaying entirely.

render

💁 Possible Solution

react-fire is using observables, so maybe that is interfering with the internals of spectrum somehow?
I first thought that all List based components are affected, but the ActionGroup works fine, so that's not it.

While debugging, the ListView went to render the ListViewItem and reached the statement, but somehow the debugger inside ListViewItem never fired for some reason, as if he never stepped in there.

Since that component is alpha, I thought it might be a component issue, but ListBox behaves the same.

I am aware that this might be an issue with react-fire, but still wondering why a component would stop rendering like that.

🔦 Context

I am building an app with Firebase and spectrum but this bug makes it impossible to continue.

💻 Code Sample

https://codesandbox.io/s/spectrum-93izg?file=/src/App.js

🌍 Your Environment

Software Version(s)
react-spectrum 3.15.1
Browser Firefox 97, Chrome 98
Operating System macOS 12.2.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