fix(modal): find primary focus element for selectorPrimaryFocus (#4172)

* fix(modal): find primary focus element for selectorPrimaryFocus Closes #4088 * fix(modal): assign innerModal ref to focusContainerElement if undefined Supports PR #4172 * chore(modal): remove focusTrap from Modal story By default, focusTrap is true. Supports PR #4172 * chore(modal): add containerElement guard
carbon-design-system · Oct 8, 2019 · f7c4b99 · f7c4b99
1 parent fa40005
commit f7c4b99
Show file tree

Hide file tree

Showing 2 changed files with 33 additions and 2 deletions.
diff --git a/packages/react/src/components/Modal/Modal-story.js b/packages/react/src/components/Modal/Modal-story.js
@@ -11,6 +11,7 @@ import { action } from '@storybook/addon-actions';
 
 import { withKnobs, boolean, text } from '@storybook/addon-knobs';
 import Modal from '../Modal';
+import TextInput from '../TextInput';
 import { settings } from 'carbon-components';
 
 const { prefix } = settings;
@@ -74,4 +75,31 @@ storiesOf('Modal', module)
           `,
       },
     }
+  )
+  .add(
+    'Trap Focus',
+    () => (
+      <>
+        <Modal {...props()} selectorPrimaryFocus="#text-input-2">
+          <TextInput
+            id="text-input-1"
+            labelText="Text Input 1"
+            placeholder="Enter text..."
+            style={{ marginBottom: '1rem' }}
+          />
+          <TextInput
+            id="text-input-2"
+            labelText="Text Input 2"
+            placeholder="Enter text..."
+          />
+        </Modal>
+      </>
+    ),
+    {
+      info: {
+        text: `
+            Specify a selector for the primary element to focus when opening a modal.
+          `,
+      },
+    }
   );
diff --git a/packages/react/src/components/Modal/Modal.js b/packages/react/src/components/Modal/Modal.js
@@ -220,12 +220,15 @@ export default class Modal extends Component {
   }
 
   initialFocus = focusContainerElement => {
-    const primaryFocusElement = focusContainerElement
-      ? focusContainerElement.querySelector(this.props.selectorPrimaryFocus)
+    const containerElement = focusContainerElement || this.innerModal.current;
+    const primaryFocusElement = containerElement
+      ? containerElement.querySelector(this.props.selectorPrimaryFocus)
       : null;
+
     if (primaryFocusElement) {
       return primaryFocusElement;
     }
+
     return this.button && this.button.current;
   };