Raycaster events not triggered on second render

I just updated my A-Frame app’s aframe-react version from 3.5.0 to 4.2.4. I believe I have made all the changes required from the upgrade (events, vector properties, _ref), although the lack of a changelog makes it hard to say exactly.

I have everything working as it did before I updated aframe-react, except for one thing: I have a menu that can be toggled on and off. The menu is initially visible, and initially raycaster events such as click and mouseover work fine. However, when I toggle the menu off and on again the raycaster events are no longer triggered in 4.2.4. If I roll back to 3.5.0 - all other code and dependencies being equal - it works again.

I don’t toggle the visibility of the menu being setting the visible property. Instead I pass a prop to the React component rendering the menu telling it whether it should render or not. If the prop is true, the component returns an <Entity>, if it is false, it returns null. This setup is due to a number factors, related to how I use Redux to manage state and use of animations.

For performance reasons I have the configured the raycaster to only intersect with specific elements:

         <Entity
            primitive="a-cursor"
            raycaster='objects: .interactable'
          />

If I remove raycaster='objects: .interactable', the menu works every time, but I get worse performance.

I have reproduced the issue here: https://www.webpackbin.com/bins/-KkkMiVwnvG9MVsuq0us

The box toggles a sphere (a stand-in for the menu in my actual code). The first time the sphere is shown, it changes color when clicked. Once it has been hidden and is shown again, it no longer changes color.

From debugging, it seems like the Three.js raycaster simply doesn’t match the sphere on subsequent renders. I just can’t figure out how any of changes made in aframe-react affects this. It doesn’t seem to be related to the changes event system, since the problem is the same if I manually attach event handlers to the element. Rather, it seems like the intersected elements are somehow cached, or like the className is not properly included on subsequent renders.

But I have nothing solid, just this example reproducing the issue above. Any help would be appreciated.

[ip]

I think I found the problem, will send a pull request in a moment

[RSpace]

With the latest A-Frame master, filtering the raycaster using objects: .interactable works as expected for me, both for laser controls and cursor.