fix(Modal): add support for primary focus selector prop (#1124)

* fix(Modal): add support for primary focus selector prop

* docs(ModalWrapper): add example of `selectorPrimaryFocus` in use

* refactor(Modal): rename parameter to be in line with current convention

* chore(ModalWrapper): update snapshot

Author: emyarod

src/components/Modal/Modal.js

@@ -25,6 +25,7 @@ export default class Modal extends Component {
     onSecondarySubmit: PropTypes.func,
     danger: PropTypes.bool,
     shouldSubmitOnEnter: PropTypes.bool,
+    selectorPrimaryFocus: PropTypes.string,
   };
 
   static defaultProps = {
@@ -36,6 +37,7 @@ export default class Modal extends Component {
     iconDescription: 'close the modal',
     modalHeading: '',
     modalLabel: '',
+    selectorPrimaryFocus: '[data-modal-primary-focus]',
   };
 
   button = React.createRef();
@@ -63,19 +65,26 @@ export default class Modal extends Component {
     }
   }
 
-  focusButton = () => {
+  focusButton = evt => {
+    const primaryFocusElement = evt.currentTarget.querySelector(
+      this.props.selectorPrimaryFocus
+    );
+    if (primaryFocusElement) {
+      primaryFocusElement.focus();
+      return;
+    }
     if (this.button) {
       this.button.current.focus();
     }
   };
 
-  handleTransitionEnd = () => {
+  handleTransitionEnd = evt => {
     if (
       this.outerModal.offsetWidth &&
       this.outerModal.offsetHeight &&
       this.beingOpen
     ) {
-      this.focusButton();
+      this.focusButton(evt);
       this.beingOpen = false;
     }
   };

src/components/ModalWrapper/ModalWrapper-story.js

@@ -152,4 +152,60 @@ storiesOf('ModalWrapper', module)
         </RadioButtonGroup>
       </ModalWrapper>
     )
+  )
+  .addWithInfo(
+    'selectorPrimaryFocus',
+    `
+      The 'selectorPrimaryFocus' prop can be used to focus on any single element when the modal is opened. The example shows an input field being focused on modal open, rather than the default behavior of focusing on the 'Save' button.
+    `,
+    () => (
+      <ModalWrapper
+        id="input-modal"
+        buttonTriggerText="Input Modal"
+        modalHeading="Modal with inputs and custom focus selector"
+        handleSubmit={action('onSubmit')}>
+        <TextInput
+          id="test2"
+          placeholder="Hint text here"
+          label="Text Input:"
+          data-modal-primary-focus
+        />
+        <br />
+        <Select id="select-1" labelText="Select">
+          <SelectItem
+            disabled
+            hidden
+            value="placeholder-item"
+            text="Pick an option"
+          />
+          <SelectItem value="option-1" text="Option 1" />
+          <SelectItem value="option-2" text="Option 2" />
+          <SelectItem value="option-3" text="Option 3" />
+        </Select>
+        <br />
+        <RadioButtonGroup
+          name="radio-button-group"
+          defaultSelected="default-selected">
+          <RadioButton
+            value="default-selected"
+            id="radio-1"
+            labelText="Radio Button label 1"
+            className="some-class"
+          />
+          <RadioButton
+            value="standard"
+            labelText="Radio Button label 2"
+            id="radio-2"
+            className="some-class"
+          />
+          <RadioButton
+            value="standard"
+            labelText="Radio Button label 3"
+            id="radio-3"
+            className="some-class"
+            disabled
+          />
+        </RadioButtonGroup>
+      </ModalWrapper>
+    )
   );

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

@@ -52,13 +52,15 @@ exports[`ModalWrapper should render 1`] = `
       primaryButtonDisabled={false}
       primaryButtonText="Save"
       secondaryButtonText="Cancel"
+      selectorPrimaryFocus="[data-modal-primary-focus]"
     >
       <div
         className="bx--modal bx--modal-tall"
         id="modal"
         onClick={[Function]}
         onKeyDown={[Function]}
         role="presentation"
+        selectorPrimaryFocus="[data-modal-primary-focus]"
         tabIndex={-1}
       >
         <div