cschroeter / park-ui

Beautifully designed components built with Ark UI and Panda CSS that work with a variety of JS frameworks.
https://park-ui.com
MIT License
1.61k stars 71 forks source link

[Bug]: Menu does render on wrong position when trigger is an Avatar element #443

Open xeinebiu opened 2 hours ago

xeinebiu commented 2 hours ago
    <HStack>
      <Spacer />
      <Menu.Root>
        <Menu.Trigger asChild>
          <Avatar name="Hello World" />
        </Menu.Trigger>
        <Menu.Positioner>
          <Menu.Content>
            <Menu.Item value="react">React</Menu.Item>
            <Menu.Item value="solid">Solid</Menu.Item>
            <Menu.Item value="vue">Vue</Menu.Item>
          </Menu.Content>
        </Menu.Positioner>
      </Menu.Root>
    </HStack>

image image


Expected Behavior

It should work the same as when using a Button as trigger image

    <HStack>
      <Spacer />
      <Menu.Root>
        <Menu.Trigger asChild>
          <Button variant="outline">Open Menu</Button>
        </Menu.Trigger>
        <Menu.Positioner>
          <Menu.Content>
            <Menu.Item value="react">React</Menu.Item>
            <Menu.Item value="solid">Solid</Menu.Item>
            <Menu.Item value="vue">Vue</Menu.Item>
          </Menu.Content>
        </Menu.Positioner>
      </Menu.Root>
    </HStack>
xeinebiu commented 2 hours ago

Removing the asChild does fix the issue with the Avatar

   <HStack>
      <Spacer />
      <Menu.Root>
        <Menu.Trigger asChild>  <-- Remove asChild 
          <Avatar name="Hello World" />
        </Menu.Trigger>
        <Menu.Positioner>
          <Menu.Content>
            <Menu.Item value="react">React</Menu.Item>
            <Menu.Item value="solid">Solid</Menu.Item>
            <Menu.Item value="vue">Vue</Menu.Item>
          </Menu.Content>
        </Menu.Positioner>
      </Menu.Root>
    </HStack>

Though I am not sure if this is intended or a bug.