palantir/blueprint

ContextMenuPopover browser context menu occasionally appears

Open

#6469 opened on Oct 17, 2023

View on GitHub
 (4 comments) (0 reactions) (0 assignees)TypeScript (20,263 stars) (2,167 forks)batch import
P3Package: coreType: bughelp wanted

Description

Environment

  • @blueprintjs/core@: 5.5.1
  • react: 17.0.2
  • Windows 10
  • Chrome 118.0.5993.71

Code Sandbox

https://blueprintjs.com/docs/#core/components/context-menu-popover.imperative-api

Steps to reproduce

This issue was previously reported as #6005. That was closed as resolved but the problem is still occurring. It's difficult to get it to happen in the documentation site but in a project that uses Blueprint.js it can be 1 in 3 right clicks will display the browser context menu.

The following code will log <div class="bp5-overlay-backdrop bp5-popover-backdrop bp5-context-menu-backdrop bp5-popover-appear-done bp5-popover-enter-done"></div> on a right click that triggers the browser context menu.

window.addEventListener('contextmenu', (e) => { console.log(e.target); });

Actual behavior

Recording-20231017_104614.webm

Expected behavior

Browser context menu is suppressed successfully. Repeating the same steps on ContextMenu does not show the browser's context menu.

Possible solution

There may be a short moment in time that the right click is propagated to the newly added overlay, before the overlay has its event set up to close the new ContextPopoverMenu on right click.

  1. Right click launches ContextMenu2 and calls preventDefault()
  2. Overlay is added quickly
  3. Right click propagates to overlay
  4. Right click menu appears <-- Problem might be here
  5. Overlay adds event to dismiss itself on any click event

Contributor guide

Tech stack
typescriptreact
Domain
frontend
Issue type
bug
DifficultyEstimated implementation difficulty for a new contributor, from 1 for very small changes to 5 for expert-level work.
3
Estimated timeA rough time range for an experienced contributor to investigate, implement, test, and prepare a pull request.
half day
Activity statusHow available the issue appears right now: fresh, active, stale, blocked, or waiting on maintainer input.
stale
ClarityHow clearly the issue explains the expected change, acceptance criteria, and next step.
clear
Prerequisites
ReactTypeScriptBlueprint.jsevent propagation
Newbie friendlinessA 1-100 score estimating how approachable this issue is for first-time contributors.
60
Research direction
Investigate the ContextMenuPopover component in the @blueprintjs/core package, focusing on the overlay backdrop event handling. The issue suggests a race condition where the right click event propagates to the newly added overlay before its dismiss handler is attached. Review the order of preventDefault calls and consider using setTimeout or a ref to ensure the overlay's event listener is registered before the event can propagate. Check the previously closed issue #6005 for context and any partial fixes.