fix(modal): set initial focus and conditionally render focus trap (#2163

)

* fix(Modal): get focus behavior in sync with/without focus-trap

* fix(modal): remove unused focus-trap, createFocusTrap

* chore(modal): update snapshots

src/components/Modal/Modal.js

@@ -225,24 +225,30 @@ export default class Modal extends Component {
     }
   }
 
-  focusButton = focusContainerElement => {
+  initialFocus = focusContainerElement => {
     const primaryFocusElement = focusContainerElement
       ? focusContainerElement.querySelector(this.props.selectorPrimaryFocus)
       : null;
     if (primaryFocusElement) {
-      primaryFocusElement.focus();
-      return;
+      return primaryFocusElement;
     }
-    if (this.button && this.button.current) {
-      this.button.current.focus();
+    return this.button && this.button.current;
+  };
+
+  focusButton = focusContainerElement => {
+    const target = this.initialFocus(focusContainerElement);
+    if (target) {
+      target.focus();
     }
   };
 
   componentDidMount() {
     if (!this.props.open) {
       return;
     }
-    this.focusButton(this.innerModal.current);
+    if (!this.props.focusTrap) {
+      this.focusButton(this.innerModal.current);
+    }
   }
 
   handleTransitionEnd = evt => {
@@ -253,7 +259,9 @@ export default class Modal extends Component {
       this.outerModal.current.offsetHeight &&
       this.beingOpen
     ) {
-      this.focusButton(evt.currentTarget);
+      if (!this.props.focusTrap) {
+        this.focusButton(evt.currentTarget);
+      }
       this.beingOpen = false;
     }
   };
@@ -349,22 +357,29 @@ export default class Modal extends Component {
       </div>
     );
 
-    return (
-      <FocusTrap active={open && focusTrap}>
-        <div
-          {...other}
-          onKeyDown={this.handleKeyDown}
-          onClick={this.handleClick}
-          onBlur={this.handleBlur}
-          className={modalClasses}
-          role="presentation"
-          tabIndex={-1}
-          onTransitionEnd={
-            this.props.open ? this.handleTransitionEnd : undefined
-          }
-          ref={this.outerModal}>
-          {modalBody}
-        </div>
+    const modal = (
+      <div
+        {...other}
+        onKeyDown={this.handleKeyDown}
+        onClick={this.handleClick}
+        onBlur={this.handleBlur}
+        className={modalClasses}
+        role="presentation"
+        tabIndex={-1}
+        onTransitionEnd={this.props.open ? this.handleTransitionEnd : undefined}
+        ref={this.outerModal}>
+        {modalBody}
+      </div>
+    );
+
+    return !focusTrap ? (
+      modal
+    ) : (
+      // `<FocusTrap>` has `active: true` in its `defaultProps`
+      <FocusTrap
+        active={!!open}
+        focusTrapOptions={{ initialFocus: this.initialFocus }}>
+        {modal}
       </FocusTrap>
     );
   }

src/components/ModalWrapper/__snapshots__/ModalWrapper-test.js.snap

@@ -60,7 +60,11 @@ exports[`ModalWrapper should render 1`] = `
       <FocusTrap
         _createFocusTrap={[Function]}
         active={false}
-        focusTrapOptions={Object {}}
+        focusTrapOptions={
+          Object {
+            "initialFocus": [Function],
+          }
+        }
         paused={false}
       >
         <div