Skip to content

Commit bcdf1ee

Browse files
committed
Add close popup when click iframe for click trigger
Using Trigger with `contextMenu` supports closing on window blur, in order to cover when a user clicks/taps on an iframe, but when we use `click` as a trigger, this was previously not supported. This fix modifies the handler to support both click and contextMenu as valid triggers. * simulates document click on window blur for both click and contextMenu triggers * `contextMenuOutsideHandler1` renamed to `contextMenuScrollOutsideHandler` to be more descriptive about what case it is handling. * `contextMenuOutsideHandler2` renamed to `clickBlurOutsideHandler` since it is the handler for click and contextMenu triggers (similar to `clickOutsideHandler`)
1 parent a619be2 commit bcdf1ee

File tree

1 file changed

+13
-13
lines changed

1 file changed

+13
-13
lines changed

src/index.js

Lines changed: 13 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -160,23 +160,23 @@ export default class Trigger extends React.Component {
160160
this.clickOutsideHandler = addEventListener(currentDocument,
161161
'mousedown', this.onDocumentClick);
162162
}
163+
// close popup when trigger type is `contextMenu`, or `click` and window is blurred
164+
if (!this.clickBlurOutsideHandler && (this.isClickToHide() || this.isContextMenuToShow())) {
165+
this.clickBlurOutsideHandler = addEventListener(window,
166+
'blur', this.onDocumentClick);
167+
}
163168
// always hide on mobile
164169
if (!this.touchOutsideHandler) {
165170
currentDocument = currentDocument || props.getDocument();
166171
this.touchOutsideHandler = addEventListener(currentDocument,
167172
'touchstart', this.onDocumentClick);
168173
}
169174
// close popup when trigger type contains 'onContextMenu' and document is scrolling.
170-
if (!this.contextMenuOutsideHandler1 && this.isContextMenuToShow()) {
175+
if (!this.contextMenuScrollOutsideHandler && this.isContextMenuToShow()) {
171176
currentDocument = currentDocument || props.getDocument();
172-
this.contextMenuOutsideHandler1 = addEventListener(currentDocument,
177+
this.contextMenuScrollOutsideHandler = addEventListener(currentDocument,
173178
'scroll', this.onContextMenuClose);
174179
}
175-
// close popup when trigger type contains 'onContextMenu' and window is blur.
176-
if (!this.contextMenuOutsideHandler2 && this.isContextMenuToShow()) {
177-
this.contextMenuOutsideHandler2 = addEventListener(window,
178-
'blur', this.onContextMenuClose);
179-
}
180180
return;
181181
}
182182

@@ -465,14 +465,14 @@ export default class Trigger extends React.Component {
465465
this.clickOutsideHandler = null;
466466
}
467467

468-
if (this.contextMenuOutsideHandler1) {
469-
this.contextMenuOutsideHandler1.remove();
470-
this.contextMenuOutsideHandler1 = null;
468+
if (this.contextMenuScrollOutsideHandler) {
469+
this.contextMenuScrollOutsideHandler.remove();
470+
this.contextMenuScrollOutsideHandler = null;
471471
}
472472

473-
if (this.contextMenuOutsideHandler2) {
474-
this.contextMenuOutsideHandler2.remove();
475-
this.contextMenuOutsideHandler2 = null;
473+
if (this.clickBlurOutsideHandler) {
474+
this.clickBlurOutsideHandler.remove();
475+
this.clickBlurOutsideHandler = null;
476476
}
477477

478478
if (this.touchOutsideHandler) {

0 commit comments

Comments
 (0)