Dropdown menu immediately closes on Android Firefox mobile

[jasonyavorsky]

Bug report

Current Behavior

Here is the behavior when using Firefox 120.0.1 on Android 14 (occurs both on Pixel 7 running 14 and in emulator):

Screen.Recording.2023-12-05.at.11.15.59.mov

This is the minimal repro:

import * as RadixDropdown from '@radix-ui/react-dropdown-menu';

export default function TestPage() {
  return (
    <>
      <RadixDropdown.Root modal={false}>
        <RadixDropdown.Trigger>Dropdown</RadixDropdown.Trigger>
        <RadixDropdown.Portal>
          <RadixDropdown.Content>
            <RadixDropdown.Item>Item 1</RadixDropdown.Item>
            <RadixDropdown.Item>Item 2</RadixDropdown.Item>
          </RadixDropdown.Content>
        </RadixDropdown.Portal>
      </RadixDropdown.Root>
    </>
  );
}

Expected behavior

Menu should stay open

Reproducible example

https://codesandbox.io/p/sandbox/confident-chebyshev-ycrqlr?file=%2Fsrc%2FApp.tsx

Suggested solution

Additional context

Your environment

Software	Name(s)	Version
Radix Package(s)	@radix-ui/react-dropdown-menu	latest
React	n/a	18.2.0
Browser	Firefox	12.0.1
Assistive tech
Node	n/a	18.x
npm/yarn	npm	>=8.0.0
Operating System	Android	14

[tvankith]

@jyavorska As quick fix can you try
<RadixDropdown.Trigger onFocusCapture={(event) => { event.stopPropagation(); }}...

[jasonyavorsky]

Nice, that fixed my dropdown issue @tvankith!

[tvankith]

I am not able to reproduce closing issue in popover component. Can you share code sample

[jasonyavorsky]

@tvankith after some more testing it's this issue: #2348, so I'll look there for ideas.

[jon301]

@jyavorska As quick fix can you try <RadixDropdown.Trigger onFocusCapture={(event) => { event.stopPropagation(); }}...

thanks, this also fixed my issue with DropdownMenu
(for info, this bug does not seem to occur with radix Popover)