From de6641f89a29b311d8667da9971849b85cf00c9d Mon Sep 17 00:00:00 2001 From: Antoine Llorca Date: Fri, 7 Jul 2017 17:50:50 -0700 Subject: [PATCH 1/2] Enforce focus after backdrop mouse down --- packages/core/src/components/overlay/overlay.tsx | 11 ++++++++--- 1 file changed, 8 insertions(+), 3 deletions(-) diff --git a/packages/core/src/components/overlay/overlay.tsx b/packages/core/src/components/overlay/overlay.tsx index 5622f9adfe..cc33cba708 100644 --- a/packages/core/src/components/overlay/overlay.tsx +++ b/packages/core/src/components/overlay/overlay.tsx @@ -309,10 +309,15 @@ export class Overlay extends React.Component { } private handleBackdropMouseDown = (e: React.MouseEvent) => { - if (this.props.canOutsideClickClose) { - safeInvoke(this.props.onClose, e); + const { backdropProps, canOutsideClickClose, enforceFocus, onClose } = this.props; + if (canOutsideClickClose) { + safeInvoke(onClose, e); + } + if (enforceFocus) { + // make sure document.activeElement is updated before bringing the focus back + requestAnimationFrame(() => this.bringFocusInsideOverlay()); } - safeInvoke(this.props.backdropProps.onMouseDown, e); + safeInvoke(backdropProps.onMouseDown, e); } private handleDocumentClick = (e: MouseEvent) => { From 8be8a72b7c88b199ac9ddf3f2ab90d67528da45e Mon Sep 17 00:00:00 2001 From: Antoine Llorca Date: Mon, 24 Jul 2017 13:28:02 -0700 Subject: [PATCH 2/2] Add test for enforceFocus --- packages/core/test/overlay/overlayTests.tsx | 14 ++++++++++++++ 1 file changed, 14 insertions(+) diff --git a/packages/core/test/overlay/overlayTests.tsx b/packages/core/test/overlay/overlayTests.tsx index e485b30141..d3afc6ba0a 100644 --- a/packages/core/test/overlay/overlayTests.tsx +++ b/packages/core/test/overlay/overlayTests.tsx @@ -207,6 +207,20 @@ describe("", () => { ); }); + it("returns focus to overlay after clicking the backdrop if enforceFocus=true", (done) => { + wrapper = mount( + + {createOverlayContents()} + , + { attachTo: testsContainerElement }, + ); + wrapper.find(BACKDROP_SELECTOR).simulate("mousedown"); + setTimeout(() => { + assert.equal(document.querySelector(`.${Classes.OVERLAY_CONTENT}`), document.activeElement); + done(); + }); + }); + it("does not result in maximum call stack if two overlays open with enforceFocus=true", () => { const anotherContainer = document.createElement("div"); document.documentElement.appendChild(anotherContainer);