Popover: ResizeObserver loop limit exceeded

[npearson72]

What package has an issue

@mantine/core

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.

[atomiks]

The rAF wrapper causes subtle bugs, I don't recommend it. Why is it not possible to ignore the error?

That said, there may be some ways to prevent the error in Floating UI itself (it does seem rare to begin with).

[npearson72]

@atomiks thanks for jumping in here. Are you suggesting this issue be reposted to floating ui for support?

[atomiks]

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

[npearson72]

Thanks @atomiks. Closing in favor of this issue being resolved upstream.

[cbelsole]

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

[npearson72]

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

[rtivital]

I do not understand what changes we need to make to the Popover component to fix the issue. You (or anyone else) are welcome to send a PR with a fix.

[MA-MacDonald]

I am running into this issue as well. It appears to happen when a Select/MultiSelect is allowed to resize within a flex container. If i move the Select outside of a flex container or hard code a width for the Select it does not give the error.

[cau777]

Hi, I'm also running into this issue. It's happening in 2 distinct places:

1. In a <Modal/> that contains <Select/>, <DatePicker/> and <TextInput/> components
2. In a <Popover/> that contains <TextInput/> components. Those components have a fixed width specified in styles.

I see this error happening a lot but only to a couple of users. I tried a bunch of things, but couldn't reproduce the issue in my machine.

I'd really appreciate some help

[EduardoCastanho]

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.

[cyantree]

Can you create an example that shows this behaviour? I've tried recreating it with a Select within a Modal but failed so far.

[atomiks]

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

[knightjdr]

A cause of this error should be fixed now if you re-install Mantine so it picks up @floating-ui/[email protected] (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.

[GrahamOrmond]

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.

setting the overflow to 'visible' for the modal content solved it for me.

<Modal styles={{ content: { overflow: 'visible !important' } }} />

[fated-x]

@GrahamOrmond - your solution works, but you lose your modal's scrollbar. We need something better.

[rtivital]

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

[micro9000]

I'm getting similar error "ResizeObserver loop completed with undelivered notifications" on Group component I can ignore the error by using useResizeObserver() hook and assigned a ref value to the Group component but I don't like doing that in every page that I have Group.

I'm using mantine version 5.2.3

Do I need to upgrade to get rid of that error?

[leadq]

Is there any solution without updating mantine ? Like just updating the floating ui thing only somehow ? Because we are using the old version of mantine in our huge project and installing the latest version could be painful

[rtivital]

You can try updating dependencies in your lock file to specific version of floating ui. You can also patch package. Note that older versions of Mantine may not work with newer version of floating ui because of breaking changes in floating ui.