[DropdownMenu] Using mouse to select drop down item traps mouse in active text selection

[nvie]

Bug report

This bug seems to be happening in Firefox only. I haven't noticed this bug in Chrome or Safari.

First affected version: @radix-ui/react-dropdown-menu @ 0.0.20.

Current Behavior

Bug:

• Click once to open a drop down menu
• Click once more to select an item from the menu
• The mouse now gets trapped in an active text selection on the underlying content

✅ Behavior before 0.0.20

Screen.Shot.2021-06-23.at.10.40.13.mp4

❌ Behavior since 0.0.20

Screen.Shot.2021-06-23.at.10.38.48.mp4

Expected behavior

When clicking to select an item from the drop down menu, I'd expect no start of a text selection to happen.

Reproducible example

This is just an arbitrary example that already existed in the gallery, not my example. It just features a drop down menu. It shows that all normal usage of this component will illustrate the bug (be sure to use Firefox, though).

CodeSandbox Template

Suggested solution

?

Your environment

Software	Name(s)	Version
Radix Package(s)	@radix-ui/react-dropdown-menu	0.0.20
React	n/a	16.14.0
Browser	Firefox	89.0.1 (64-bit)
Operating System	macOS	10.15.7 (19H114)

[MildTomato]

Yep, we're getting the same.
Only on Firefox as well.

[MildTomato]

You can resolve this by using this css on Item, Checkbox and Radio.

.radix-dropdown-item {
  /* 
    your styles...
  */
  user-select: none; /* add this */
}

[jjenzz]

I've managed to narrow this down as being introduced in the PR where we switched from mouse events to pointer events.

Looks like some pointer capture stuff going on 🤔