Popover with Control inside Tooltip not opening

[yngwi]

What package has an issue

@mantine/core

Describe the bug

When trying to use a control wrapped into a Tooltip as Popover.Target, the Popover doesn't open as expected, only the tooltip gets opened. The following snippet shows this behavior:

<Popover width={200} position="bottom" withArrow shadow="md">
  <Popover.Target>
    <Tooltip label="This is a tooltip">
      <Button>Toggle popover</Button>
    </Tooltip>
  </Popover.Target>
  <Popover.Dropdown>
    <Text size="sm">
      This is uncontrolled popover, it is opened when button is clicked
    </Text>
  </Popover.Dropdown>
</Popover>

In which browser did the problem occur

All of them

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

https://codesandbox.io/s/stupefied-goldstine-wy3ctr

Do you know how to fix the issue

No

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

No response

Possible fix

No response

[rtivital]

Wrap child node with an extra element – https://codesandbox.io/s/rough-hooks-fne7y6?file=/src/App.tsx

[yngwi]

Hi, I've seen your solution now also in the discord but for me this has the effect that the tooltip isn't placed correctly any more. Please see the following two screenshots, both with position="bottom":

Tooltip > Button:

Tooltip > span > Popover.Target > Button:

What would be the correct way to avoid this?

[rtivital]

Fixed in 5.1.5 – https://codesandbox.io/s/admiring-morning-56hcsb?file=/src/App.tsx

[baurine]

Report a similar issue, maybe helpful for others.

@mantine/core version: 5.7.2

The following code doesn't work, only show tooltip, can't show drop menu:

    <Menu shadow='md' position='bottom-end'>
      <Menu.Target>
        <Tooltip label='aaaa'>
          <ActionIcon
            color='gray.9'
            size='lg'
            onClick={()=>console.log('click')}
          >
            <IconLink size={28} />
          </ActionIcon>
        </Tooltip>
      </Menu.Target>
      <Menu.Dropdown>
        ...
      </Menu.Dropdown>
    </Menu>

Solutions:

Solution 1: Remove the onClick value for ActionIcon, aka:

      <Menu.Target>
        <Tooltip label='aaaa'>
          <ActionIcon
            color='gray.9'
            size='lg'
            // onClick={()=>console.log('click')}
          >
            <IconLink size={28} />
          </ActionIcon>
        </Tooltip>
      </Menu.Target>

Solution 2: wrap ActionIcon with a div, aka:

      <Menu.Target>
        <Tooltip label='aaaa'>
          <div>
            <ActionIcon
              color='gray.9'
              size='lg'
              onClick={() => console.log('click')}
            >
              <IconLink size={28} />
            </ActionIcon>
          </div>
        </Tooltip>
      </Menu.Target>