Tabs in Modal opened from Menu cause tab to become unresponsive in Firefox

sienkiewiczkm commented 7 months ago

Dependencies check up

[X] I have verified that I use latest version of all @mantine/* packages

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

7.8.1

What package has an issue?

@mantine/core

What framework do you use?

Vite

In which browsers you can reproduce the issue?

Firefox

Describe the bug

In <Menu/> I have a option that opens the <Modal/>, which inside contains the <Tabs/>. For some reason on Firefox, if you click on "Tab 2" whole browser tab will freeze and you'll be forced to kill the tab, minimal component that is able to trigger the failure:

const MyDemo = () => {
  const [opened, { open, close }] = useDisclosure(false);
  const modal = (
    <Modal opened={opened} onClose={close} title="hi" size="xl">
      <Tabs defaultValue="t1">
        <Tabs.List>
          <Tabs.Tab value="t1">Tab 1</Tabs.Tab>
          <Tabs.Tab value="t2">Tab 2</Tabs.Tab>
        </Tabs.List>
        <Tabs.Panel value="t1">Tab 1</Tabs.Panel>
        <Tabs.Panel value="t2">Tab 2</Tabs.Panel>
      </Tabs>
    </Modal>
  );

  return (
    <>
      <Text>Bug is reproducible only in Firefox</Text>
      <Menu shadow="md" width={350} position="bottom-end">
        <Menu.Target>
          <Button variant="subtle">Magic menu</Button>
        </Menu.Target>
        <Menu.Dropdown>
          <Menu.Label>Section</Menu.Label>
          <Menu.Item onClick={() => open()}>Open!</Menu.Item>
        </Menu.Dropdown>
      </Menu>
      {modal}
    </>
  );
};

User-agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.15; rv:125.0) Gecko/20100101 Firefox/125.0

This issue as far I can tell can be reproduced in Firefox and causes total freeze in the tab.

Demo:

https://sienkiewiczkm.github.io/mantine-popovers-firefox-bug/ (repo: https://github.com/sienkiewiczkm/mantine-popovers-firefox-bug)
also same thing in Codesandbox

I tried debugging this very deep into React internals, but I couldn't find a root cause.

Edit: Additional piece of context (possibly useless), strangely in my main repo (large app that I cannot share) this bug occurs only when I set NODE_ENV to production. That's not strictly required for the small repro repos.

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

https://codesandbox.io/p/sandbox/mantine-combobox-in-scrollable-popovers-forked-6qkwyn

Possible fix

No response

Self-service

[ ] I would be willing to implement a fix for this issue

sienkiewiczkm commented 7 months ago

I just tested Firefox (125.0.3) on Windows and it works, so it appears that issue is MacOS exclusive (confirmed also on another MacOS machine). I don't know if Linux is affected.

ndelon commented 3 months ago

FYI, I encountered the same problem under similar/same circumstances:

Mantine 7.11.2
Firefox 128.0.3
Tabs in a modal

And as described in https://github.com/webcompat/web-bugs/issues/136574, if the modal is opened => closed => re-opened before switching tabs, then the freeze does NOT happen.

Kenzo-Wada commented 3 months ago

I don't know if Linux is affected.

I've tested with Ubunutu, but it didnt appear so this issue may occur only for MacOS

ndelon commented 2 months ago

FYI, I encountered the same problem under similar/same circumstances:
* Mantine 7.11.2

* Firefox 128.0.3

* Tabs in a modal
And as described in webcompat/web-bugs#136574, if the modal is opened => closed => re-opened before switching tabs, then the freeze does NOT happen.

After some recent updates:

Mantine 7.12.2
Firefox 130.0.1
macOS 14.6.1

I'm not able to reproduce this issue anymore.

rtivital commented 1 month ago

I've checked, the issue seems to have been resolved in one of the previous releases, it works correctly if all Mantine packages are updated to 7.13.1

mantinedev / mantine