Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[DropdownMenu] Fix touch devices trigger bug #3241

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
Open

[DropdownMenu] Fix touch devices trigger bug #3241

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion .github/CONTRIBUTING.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,7 +35,7 @@ There are many ways to contribute to the project. Code is just one possible mean

## Working on your first Pull Request?

There are a lot of great resources on creating a good pull request. We've included a few below, but don't be shy—we appreciate all contriibutions and are happy to help those who are willing to help us!
There are a lot of great resources on creating a good pull request. We've included a few below, but don't be shy—we appreciate all contributions and are happy to help those who are willing to help us!

- [How to Contribute to a Project on GitHub](https://egghead.io/courses/how-to-contribute-to-an-open-source-project-on-github)

Expand Down
15 changes: 13 additions & 2 deletions packages/react/dropdown-menu/src/DropdownMenu.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -100,6 +100,8 @@ const DropdownMenuTrigger = React.forwardRef<DropdownMenuTriggerElement, Dropdow
const { __scopeDropdownMenu, disabled = false, ...triggerProps } = props;
const context = useDropdownMenuContext(TRIGGER_NAME, __scopeDropdownMenu);
const menuScope = useMenuScope(__scopeDropdownMenu);
const pointerTypeRef = React.useRef<React.PointerEvent['pointerType']>('touch');

return (
<MenuPrimitive.Anchor asChild {...menuScope}>
<Primitive.button
Expand All @@ -113,10 +115,19 @@ const DropdownMenuTrigger = React.forwardRef<DropdownMenuTriggerElement, Dropdow
disabled={disabled}
{...triggerProps}
ref={composeRefs(forwardedRef, context.triggerRef)}
onClick={composeEventHandlers(props.onClick, () => {
// Open on click when using a touch or pen device
if (!disabled && pointerTypeRef.current !== 'mouse') {
context.onOpenToggle();
}
})}
onPointerDown={composeEventHandlers(props.onPointerDown, (event) => {
pointerTypeRef.current = event.pointerType;

// only call handler if it's the left button (mousedown gets triggered by all mouse buttons)
// but not when the control key is pressed (avoiding MacOS right click)
if (!disabled && event.button === 0 && event.ctrlKey === false) {
// but not when the control key is pressed (avoiding MacOS right click); also not for touch
// devices because that would open the menu on scroll. (pen devices behave as touch on iOS).
if (!disabled && event.button === 0 && event.ctrlKey === false && event.pointerType === 'mouse') {
context.onOpenToggle();
// prevent trigger focusing when opening
// this allows the content to be given focus without competition
Expand Down