Skip to content

Fix menu not closing when clicking tabs #818

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

Merged
krassowski merged 5 commits into from
May 22, 2026
+107 −103
Merged

Fix menu not closing when clicking tabs #818

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
a39c465
use-pointerdown-instead
Darshan808 May 18, 2026
8efa05b
change-tests-to-use-pointerdown
Darshan808 May 18, 2026
5801a05
fix-tests
Darshan808 May 18, 2026
853907e
change-all-mouse*-events-to-pointer*-events
Darshan808 May 19, 2026
9fc3ac5
lint
Darshan808 May 19, 2026
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
60 changes: 30 additions & 30 deletions packages/widgets/src/menu.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -504,20 +504,20 @@ export class Menu extends Widget {
case 'keydown':
this._evtKeyDown(event as KeyboardEvent);
break;
case 'mouseup':
this._evtMouseUp(event as MouseEvent);
case 'pointerup':
this._evtPointerUp(event as PointerEvent);
break;
case 'mousemove':
this._evtMouseMove(event as MouseEvent);
case 'pointermove':
this._evtPointerMove(event as PointerEvent);
break;
case 'mouseenter':
this._evtMouseEnter(event as MouseEvent);
case 'pointerenter':
this._evtPointerEnter(event as PointerEvent);
break;
case 'mouseleave':
this._evtMouseLeave(event as MouseEvent);
case 'pointerleave':
this._evtPointerLeave(event as PointerEvent);
break;
Comment thread
Darshan808 marked this conversation as resolved.
case 'mousedown':
this._evtMouseDown(event as MouseEvent);
case 'pointerdown':
this._evtPointerDown(event as PointerEvent);
break;
case 'contextmenu':
event.preventDefault();
Expand All @@ -531,25 +531,25 @@ export class Menu extends Widget {
*/
protected onBeforeAttach(msg: Message): void {
this.node.addEventListener('keydown', this);
this.node.addEventListener('mouseup', this);
this.node.addEventListener('mousemove', this);
this.node.addEventListener('mouseenter', this);
this.node.addEventListener('mouseleave', this);
this.node.addEventListener('pointerup', this);
this.node.addEventListener('pointermove', this);
this.node.addEventListener('pointerenter', this);
this.node.addEventListener('pointerleave', this);
this.node.addEventListener('contextmenu', this);
document.addEventListener('mousedown', this, true);
document.addEventListener('pointerdown', this, true);
}

/**
* A message handler invoked on an `'after-detach'` message.
*/
protected onAfterDetach(msg: Message): void {
this.node.removeEventListener('keydown', this);
this.node.removeEventListener('mouseup', this);
this.node.removeEventListener('mousemove', this);
this.node.removeEventListener('mouseenter', this);
this.node.removeEventListener('mouseleave', this);
this.node.removeEventListener('pointerup', this);
this.node.removeEventListener('pointermove', this);
this.node.removeEventListener('pointerenter', this);
this.node.removeEventListener('pointerleave', this);
this.node.removeEventListener('contextmenu', this);
document.removeEventListener('mousedown', this, true);
document.removeEventListener('pointerdown', this, true);
}

/**
Expand Down Expand Up @@ -710,12 +710,12 @@ export class Menu extends Widget {
}

/**
* Handle the `'mouseup'` event for the menu.
* Handle the `'pointerup'` event for the menu.
*
* #### Notes
* This listener is attached to the menu node.
*/
private _evtMouseUp(event: MouseEvent): void {
private _evtPointerUp(event: PointerEvent): void {
if (event.button !== 0) {
return;
}
Expand All @@ -725,12 +725,12 @@ export class Menu extends Widget {
}

/**
* Handle the `'mousemove'` event for the menu.
* Handle the `'pointermove'` event for the menu.
*
* #### Notes
* This listener is attached to the menu node.
*/
private _evtMouseMove(event: MouseEvent): void {
private _evtPointerMove(event: PointerEvent): void {
// Hit test the item nodes for the item under the mouse.
let index = ArrayExt.findFirstIndex(this.contentNode.children, node => {
return ElementExt.hitTest(node, event.clientX, event.clientY);
Expand Down Expand Up @@ -771,12 +771,12 @@ export class Menu extends Widget {
}

/**
* Handle the `'mouseenter'` event for the menu.
* Handle the `'pointerenter'` event for the menu.
*
* #### Notes
* This listener is attached to the menu node.
*/
private _evtMouseEnter(event: MouseEvent): void {
private _evtPointerEnter(event: PointerEvent): void {
// Synchronize the active ancestor items.
for (let menu = this._parentMenu; menu; menu = menu._parentMenu) {
menu._cancelOpenTimer();
Expand All @@ -786,12 +786,12 @@ export class Menu extends Widget {
}

/**
* Handle the `'mouseleave'` event for the menu.
* Handle the `'pointerleave'` event for the menu.
*
* #### Notes
* This listener is attached to the menu node.
*/
private _evtMouseLeave(event: MouseEvent): void {
private _evtPointerLeave(event: PointerEvent): void {
// Cancel any pending submenu opening.
this._cancelOpenTimer();

Expand All @@ -814,12 +814,12 @@ export class Menu extends Widget {
}

/**
* Handle the `'mousedown'` event for the menu.
* Handle the `'pointerdown'` event for the menu.
*
* #### Notes
* This listener is attached to the document node.
*/
private _evtMouseDown(event: MouseEvent): void {
private _evtPointerDown(event: PointerEvent): void {
// Bail if the menu is not a root menu.
if (this._parentMenu) {
return;
Expand Down
36 changes: 18 additions & 18 deletions packages/widgets/src/menubar.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -360,12 +360,12 @@ export class MenuBar extends Widget {
case 'keydown':
this._evtKeyDown(event as KeyboardEvent);
break;
case 'mousedown':
this._evtMouseDown(event as MouseEvent);
case 'pointerdown':
this._evtPointerDown(event as PointerEvent);
break;
case 'mousemove':
case 'mouseleave':
this._evtMouseMove(event as MouseEvent);
case 'pointermove':
case 'pointerleave':
this._evtPointerMove(event as PointerEvent);
break;
case 'focusout':
this._evtFocusOut(event as FocusEvent);
Expand All @@ -382,9 +382,9 @@ export class MenuBar extends Widget {
*/
protected onBeforeAttach(msg: Message): void {
this.node.addEventListener('keydown', this);
this.node.addEventListener('mousedown', this);
this.node.addEventListener('mousemove', this);
this.node.addEventListener('mouseleave', this);
this.node.addEventListener('pointerdown', this);
this.node.addEventListener('pointermove', this);
this.node.addEventListener('pointerleave', this);
this.node.addEventListener('focusout', this);
this.node.addEventListener('contextmenu', this);
}
Expand All @@ -394,9 +394,9 @@ export class MenuBar extends Widget {
*/
protected onAfterDetach(msg: Message): void {
this.node.removeEventListener('keydown', this);
this.node.removeEventListener('mousedown', this);
this.node.removeEventListener('mousemove', this);
this.node.removeEventListener('mouseleave', this);
this.node.removeEventListener('pointerdown', this);
this.node.removeEventListener('pointermove', this);
this.node.removeEventListener('pointerleave', this);
this.node.removeEventListener('focusout', this);
this.node.removeEventListener('contextmenu', this);
this._closeChildMenu();
Expand Down Expand Up @@ -651,9 +651,9 @@ export class MenuBar extends Widget {
}

/**
* Handle the `'mousedown'` event for the menu bar.
* Handle the `'pointerdown'` event for the menu bar.
*/
private _evtMouseDown(event: MouseEvent): void {
private _evtPointerDown(event: PointerEvent): void {
// Bail if the mouse press was not on the menu bar. This can occur
// when the document listener is installed for an active menu bar.
if (!ElementExt.hitTest(this.node, event.clientX, event.clientY)) {
Expand Down Expand Up @@ -698,9 +698,9 @@ export class MenuBar extends Widget {
}

/**
* Handle the `'mousemove'` event for the menu bar.
* Handle the `'pointermove'` event for the menu bar.
*/
private _evtMouseMove(event: MouseEvent): void {
private _evtPointerMove(event: PointerEvent): void {
// Check if the mouse is over one of the menu items.
let index = ArrayExt.findFirstIndex(this.contentNode.children, node => {
return ElementExt.hitTest(node, event.clientX, event.clientY);
Expand Down Expand Up @@ -802,7 +802,7 @@ export class MenuBar extends Widget {
if (oldMenu) {
oldMenu.close();
} else {
document.addEventListener('mousedown', this, true);
document.addEventListener('pointerdown', this, true);
}

// Update the tab focus index and ensure the menu bar is updated.
Expand Down Expand Up @@ -841,7 +841,7 @@ export class MenuBar extends Widget {
this.removeClass('lm-mod-active');

// Remove the document listeners.
document.removeEventListener('mousedown', this, true);
document.removeEventListener('pointerdown', this, true);

// Clear the internal menu reference.
let menu = this._childMenu;
Expand All @@ -867,7 +867,7 @@ export class MenuBar extends Widget {
this.removeClass('lm-mod-active');

// Remove the document listeners.
document.removeEventListener('mousedown', this, true);
document.removeEventListener('pointerdown', this, true);

// Clear the internal menu reference.
this._childMenu = null;
Expand Down
Loading
Loading