mantine: Popover: ResizeObserver loop limit exceeded

What package has an issue

Describe the bug

I discovered the following error ResizeObserver loop limit exceeded when using Popover, but it seems to be related to @floating-ui

See: https://github.com/floating-ui/floating-ui/issues/1740

What version of @mantine/hooks page do you have in package.json?

6.0.1

If possible, please include a link to a codesandbox with the reproduced problem

No response

Do you know how to fix the issue

Yes

Are you willing to participate in fixing this issue and create a pull request with the fix

Yes

Possible fix

The fix is described in https://github.com/floating-ui/floating-ui/issues/1740

Here is an example of how someone else fixed it: https://github.com/TalismanSociety/talisman-web/pull/602/files

I believe all that would be needed to resolve it would be to change this code:

https://github.com/mantinedev/mantine/blob/master/src/mantine-core/src/Popover/use-popover.ts#L75-L91

Like so:

const floating = useFloating({
    placement: options.position,
    middleware: [
      ...getPopoverMiddlewares(options),
      ...(options.width === 'target'
        ? [
            size({
              apply({ rects }) {
                requestAnimationFrame(() => {
                  Object.assign(floating.refs.floating.current?.style ?? {}, {
                    width: `${rects.reference.width}px`,
                  });
                });
              },
            }),
          ]
        : []),
    ],
  });

However, something similar might be needed for the middlewares?

I’m not sure why this isn’t resolved upstream at @floating-ui but the feedback in the referenced issue seemed to defer to user land.

About this issue

Original URL
State: closed
Created a year ago
Reactions: 4
Comments: 17 (3 by maintainers)

Most upvoted comments

FYI: This happened to us. We tracked it down to the Select component.

cbelsole on May 24, 2023

Hi,

In my case, Modal with a Select inside, if I use attribute withinPortal={true} in Select the problem goes away and all works fine.

I think is related with the Select dropdown size conflicting with Modal size.

EduardoCastanho on Jun 23, 2023

I’ve not been able to reproduce the issue after floating-ui package has been updated to the latest version (0.26.9).

rtivital on Feb 26, 2024

A cause of this error should be fixed now if you re-install Mantine so it picks up @floating-ui/dom@1.4.3 (a transitive dependency). Clear the cache and verify if that version successfully installed in your lockfile or node_modules folder.

This did not fix it for me. I reinstalled and cleared the cache. I can see the specified version in my lock file:

  "name": "@floating-ui/dom",
  "version": "1.4.3",

I’m using the Autocomplete component in a Modal.

The error is sporadic though. In my component tests I don’t get the error when running one test at a time, but get it occasionally when running them as a group. So for now I’m just ignoring the error in my tests.

knightjdr on Jul 5, 2023

A cause of this error should be fixed now if you re-install Mantine so it picks up @floating-ui/dom@1.4.3 (a transitive dependency). Clear the cache and verify if that version successfully installed in your lockfile or node_modules folder.

atomiks on Jun 29, 2023

Re-opening this ticket based on these comments: https://github.com/floating-ui/floating-ui/pull/2335#issuecomment-1556269031

npearson72 on May 24, 2023

I’ve re-opened the existing issue that was closed

atomiks on May 18, 2023