Dropdown menu immediately closes on Android Firefox mobile

[jyavorska]

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):

https://github.com/radix-ui/primitives/assets/3529318/88f31fdd-3b0c-49c5-be68-7150d99194e9

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(); }}...

[jyavorska]

Nice, that fixed my dropdown issue @tvankith!

[tvankith]

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

[jyavorska]

@tvankith after some more testing it's this issue: https://github.com/radix-ui/primitives/issues/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)