Skip to content

Commit

Permalink
Custom modal aux click (#6891)
Browse files Browse the repository at this point in the history
## Motivation for features / changes
On some browsers, the [custom modal
close](https://github.com/tensorflow/tensorboard/blob/0627ad5480b309a5f3f69f39e52670496c2e5863/tensorboard/webapp/widgets/custom_modal/custom_modal.ts#L116)
logic will be triggered immediately after releasing the right click
button, which causes the modal to be closed as soon as it is opened.

## Technical description of changes
The modal close event handler will ignore the `auxclick` (right click)
mouseup event. Modals can still be closed with left clicks and the
`contextmenu` event.

## Screenshots of UI changes (or N/A)
Status quo:
![image](https://github.com/user-attachments/assets/5b4c0c8f-4878-4cbe-a46a-cd425c188061)
  • Loading branch information
hoonji authored Aug 12, 2024
1 parent 0627ad5 commit 2d1bf5e
Showing 1 changed file with 17 additions and 17 deletions.
34 changes: 17 additions & 17 deletions tensorboard/webapp/widgets/custom_modal/custom_modal.ts
Original file line number Diff line number Diff line change
Expand Up @@ -109,23 +109,23 @@ export class CustomModal {
const customModalRef = new CustomModalRef(overlayRef);
this.customModalRefs.push(customModalRef);

// setTimeout to prevent closing immediately after modal open.
setTimeout(() => {
const outsidePointerEventsSubscription = overlayRef
.outsidePointerEvents()
.subscribe((event) => {
// Only close when click is outside of every modal
if (
this.customModalRefs.every(
(ref) =>
!isMouseEventInElement(event, ref.overlayRef.overlayElement)
)
) {
this.closeAll();
}
});
customModalRef.subscriptions.push(outsidePointerEventsSubscription);
});
const outsidePointerEventsSubscription = overlayRef
.outsidePointerEvents()
.subscribe((event) => {
// Prevent the right click mouseup event from immediately closing the modal.
if (event.type === 'auxclick') return;

// Only close when click is outside of every modal
if (
this.customModalRefs.every(
(ref) =>
!isMouseEventInElement(event, ref.overlayRef.overlayElement)
)
) {
this.closeAll();
}
});
customModalRef.subscriptions.push(outsidePointerEventsSubscription);

const keydownEventsSubscription = overlayRef
.keydownEvents()
Expand Down

0 comments on commit 2d1bf5e

Please sign in to comment.