Skip to content

Conversation

@juskevicius
Copy link

@juskevicius juskevicius commented Feb 28, 2025

One more bug with requestAnimationFrame that is executed asynchronously.
The issue is that requestAnimationFrame callback might be executed after a while, when the state has changed and the component is no longer visible (state.isVisible is false). The outcome - the menu gets closed, but then is immediately re-opened.

Can reproduce the bug with this test (run in ContextMenu.test.js file):

    test('hides the menu but then reopens incorrectly', async () => {
        const data = { position: { x: 50, y: 50 }, id: 'CORRECT_ID' };
        const { rerender } = render(<ContextMenu id={data.id} hideOnLeave />);
        const user = userEvent.setup();

        await showMenu(data);

        // trigger re-render -> componentDidUpdate -> schedule requestAnimationFrame to set opacity to 1:
        rerender(<ContextMenu id={data.id} hideOnLeave />); 
        
        // trigger menu hide:
        await user.click(document.body);
        // menu is hidden, opacity is set to 0 - OK:
        await waitFor(() => expect(contextMenuElement()).not.toBeVisible());

        // requestAnimationFrame is finally called, opacity is set to 1 again - NOT OK:
        await waitFor(() => expect(contextMenuElement()).toBeVisible());
    });

Solution: check for visibility state in the callback itself

@netlify
Copy link

netlify bot commented Feb 28, 2025

Deploy Preview for firefox-devtools-react-contextmenu ready!

Name Link
🔨 Latest commit 903fcc7
🔍 Latest deploy log https://app.netlify.com/sites/firefox-devtools-react-contextmenu/deploys/67c97cd2285ad40008df013c
😎 Deploy Preview https://deploy-preview-292--firefox-devtools-react-contextmenu.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.
Lighthouse
Lighthouse
1 paths audited
Performance: 90
Accessibility: 82
Best Practices: 92
SEO: 92
PWA: -
View the detailed breakdown and full score reports

To edit notification comments on pull requests, go to your Netlify site configuration.

@julienw julienw self-requested a review March 5, 2025 07:43
Copy link

@julienw julienw left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks, this looks good to me!

I remember that in the past I had to workaround some issues that might be related to that actually... :-)

@julienw julienw merged commit 79157d6 into firefox-devtools:master Mar 6, 2025
6 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants