Skip to content

flushSync was called from inside a lifecycle method #7982

Open
@crabvk

Description

@crabvk

Dependencies check up

  • I have verified that I use latest version of all @mantine/* packages

What version of @mantine/* packages do you have in package.json?

8.1.1

What package has an issue?

@mantine/core

What framework do you use?

Vite

In which browsers you can reproduce the issue?

Other, I will specify in the bug description

Describe the bug

Bug is present since Mantine 8.1.0, version 8.0.2 isn't affected.
Reproduced in Chromium 137.0.7151.68 and Firefox 140.0b9.
Description: I put several components on the page that use floating-ui library, for example Select, so to make scrollbar visible. Now, when I scroll fast the browser's tab stops responding and freezes. Chromium requires kill and restart, while Firefox shows dialog to pause and debug. In the console Firefox shows a lot of the same debug messages:

flushSync was called from inside a lifecycle method. React cannot flush when React is already rendering. Consider moving this call to a scheduler task or micro task. Stack: 
    InputBase InputBase.tsx:44
    Select Select.tsx:278
    ComboboxTarget ComboboxTarget.tsx:84
    Select Select.tsx:277
    children App.tsx:8
    App App.tsx:7
<anonymous code>:1:145535

If possible, include a link to a codesandbox with a minimal reproduction

https://stackblitz.com/~/github.com/crabvk/mantine-floating-ui-bug

Possible fix

I suspect it's a bug in Floating UI.

Self-service

  • I would be willing to implement a fix for this issue

Metadata

Metadata

Assignees

No one assigned

    Labels

    help wantedContributions from community are welcome

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions