feat(focus): focus last element on modal close (#17)

Meemaw · Apr 11, 2019 · a92b7df · a92b7df
1 parent 68ff0b1
commit a92b7df
Show file tree

Hide file tree

Showing 2 changed files with 29 additions and 15 deletions.
diff --git a/src/index.tsx b/src/index.tsx
@@ -71,7 +71,7 @@ class MicroModal extends React.PureComponent<Props, State> {
   isControlled = this.props.open !== undefined;
   modalRef = React.createRef<HTMLDivElement>();
   containerRef = React.createRef<HTMLDivElement>();
-  focusedElement?: HTMLElement;
+  lastElement?: HTMLElement;
 
   static getDerivedStateFromProps(props: Props, state: State) {
     if (props.open !== undefined && props.open !== state.open) {
@@ -111,6 +111,7 @@ class MicroModal extends React.PureComponent<Props, State> {
   };
 
   private onAfterOpen = (): void => {
+    this.lastElement = document.activeElement as HTMLElement;
     openContainerRefStack.push(this.containerRef);
     this.addEventListeners();
     this.focusFirstNode();
@@ -150,20 +151,20 @@ class MicroModal extends React.PureComponent<Props, State> {
   };
 
   private onAfterClose = (): void => {
+    this.removeEventListeners();
     openContainerRefStack.pop();
-    if (openContainerRefStack.length > 0) {
-      focusFirstNode(getLastOpenContainer());
+    if (this.lastElement) {
+      this.lastElement.focus();
+      this.lastElement = undefined;
     }
-    this.removeEventListeners();
-    this.focusedElement = undefined;
   };
 
   private focusFirstNode(): void {
     if (this.props.disableFirstElementFocus) {
       return;
     }
 
-    this.focusedElement = focusFirstNode(this.containerRef);
+    focusFirstNode(this.containerRef);
   }
 
   private removeEventListeners = (): void => {
@@ -187,18 +188,15 @@ class MicroModal extends React.PureComponent<Props, State> {
   private onKeydown = (event: KeyboardEvent): void => {
     if (this.containerRef === getLastOpenContainer()) {
       if (event.key === ESCAPE_KEY && this.props.closeOnEscapePress) {
+        event.stopPropagation();
         this.handleClose();
       }
       if (event.key === TAB_KEY) {
-        this.focusedElement = handleTabPress(this.containerRef, event);
+        handleTabPress(this.containerRef, event);
       }
     }
   };
 
-  private getOverlayZIndex(): number {
-    return openContainerRefStack.findIndex(r => r === this.containerRef);
-  }
-
   private renderContent = (
     open: boolean,
     isClosing: boolean,
@@ -239,7 +237,6 @@ class MicroModal extends React.PureComponent<Props, State> {
             className={baseModalOverlayClassName}
             style={{
               ...OVERLAY_BASE_STYLE,
-              zIndex: zIndex || this.getOverlayZIndex(),
               ...restOverlayStyle
             }}
           >

diff --git a/stories/components.tsx b/stories/components.tsx
@@ -61,9 +61,26 @@ const StoryModalContent = ({ handleClose }: ContentProps) => {
 const StoryUncontrolledModal = (props: BaseProps) => (
   <MicroModal
     trigger={handleOpen => (
-      <button role="button" onClick={handleOpen}>
-        Open modal
-      </button>
+      <div
+        style={{
+          width: '400px',
+          height: '400px',
+          background: '#F06292',
+          display: 'flex',
+          justifyContent: 'center',
+          flexDirection: 'column',
+          textAlign: 'center'
+        }}
+      >
+        <div>
+          <button
+            style={{ border: 'none', padding: '16px', borderRadius: '12px' }}
+            onClick={handleOpen}
+          >
+            Open modal
+          </button>
+        </div>
+      </div>
     )}
     {...props}
   >