Dropdown disappears it if it is on top of trigger

[adatti]

I'm trying to get the DropdownMenu to appear not below/beside, but on top of the DropdownTrigger. Now I have the following situation (play with sound on):

video_2023-02-04_19-07-47.mp4

When clicked, the element flashes and disappears on mouseup. If I release the mouse outside the menu content (like at the end of the video), then it doesn't disappear. Similarly, when using the keyboard, the content stays.

I used the side="left" align="start" sideOffset={-30} to get the content to cover the trigger. I've tried adding onClick and onMouseUp event listeners to the Trigger but to no effect.

<DropdownMenu.Root modal={false}>
  <DropdownMenu.Trigger asChild>
    <button className={styles.more}>
      <MoreIcon />
    </button>
  </DropdownMenu.Trigger>
  <DropdownMenu.Portal>
    <DropdownMenu.Content
      side="left"
      align="start"
      sideOffset={-30}
      className={styles.dropdownMenuContent}
    >
      <DropdownMenu.Item className={styles.dropdownMenuContentItem}>
        <span className={styles.dropdownMenuContentItemText}>
          follow @user
        </span>
        <FollowIcon className={styles.dropdownMenuContentItemIcon} />
      </DropdownMenu.Item>
      <DropdownMenu.Item className={styles.dropdownMenuContentItem}>
        <span className={styles.dropdownMenuContentItemText}>
          block @user
        </span>
        <BlockIcon className={styles.dropdownMenuContentItemIcon} />
      </DropdownMenu.Item>
    </DropdownMenu.Content>
  </DropdownMenu.Portal>
</DropdownMenu.Root>

[adatti]

Gots it, onSelect={(e) => e.preventDefault()} on the DropdownMenu.Item prevents it.

[joaom00]

I think the best solution is setPointerCapture in the trigger. If you preventDefault when selecting you will need to close the dropdown manually

https://codesandbox.io/s/dreamy-haslett-8vnuxm?file=/App.js

[benoitgrelard]

To be clear, the positioning is a little strange for a dropdown menu as it's supposed to show it's "anchored" to the trigger. That said, we are planning to bring the same UX as we have on Select for this so that your case wouldn't be an issue. See this: #657