Skip to content

Commit 6880188

Browse files
hoonjigroszewn
authored andcommitted
Custom modal aux click (#6891)
## 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)
1 parent 9e6d7e8 commit 6880188

File tree

1 file changed

+17
-17
lines changed

1 file changed

+17
-17
lines changed

tensorboard/webapp/widgets/custom_modal/custom_modal.ts

+17-17
Original file line numberDiff line numberDiff line change
@@ -109,23 +109,23 @@ export class CustomModal {
109109
const customModalRef = new CustomModalRef(overlayRef);
110110
this.customModalRefs.push(customModalRef);
111111

112-
// setTimeout to prevent closing immediately after modal open.
113-
setTimeout(() => {
114-
const outsidePointerEventsSubscription = overlayRef
115-
.outsidePointerEvents()
116-
.subscribe((event) => {
117-
// Only close when click is outside of every modal
118-
if (
119-
this.customModalRefs.every(
120-
(ref) =>
121-
!isMouseEventInElement(event, ref.overlayRef.overlayElement)
122-
)
123-
) {
124-
this.closeAll();
125-
}
126-
});
127-
customModalRef.subscriptions.push(outsidePointerEventsSubscription);
128-
});
112+
const outsidePointerEventsSubscription = overlayRef
113+
.outsidePointerEvents()
114+
.subscribe((event) => {
115+
// Prevent the right click mouseup event from immediately closing the modal.
116+
if (event.type === 'auxclick') return;
117+
118+
// Only close when click is outside of every modal
119+
if (
120+
this.customModalRefs.every(
121+
(ref) =>
122+
!isMouseEventInElement(event, ref.overlayRef.overlayElement)
123+
)
124+
) {
125+
this.closeAll();
126+
}
127+
});
128+
customModalRef.subscriptions.push(outsidePointerEventsSubscription);
129129

130130
const keydownEventsSubscription = overlayRef
131131
.keydownEvents()

0 commit comments

Comments
 (0)