Feature/1067 focus trap initialfocus

src-docs/src/views/modal/modal.js

@@ -88,6 +88,7 @@ export class Modal extends Component {
           <EuiModal
             onClose={this.closeModal}
             style={{ width: '800px' }}
+            initialFocus="[name=popswitch]"
           >
             <EuiModalHeader>
               <EuiModalHeaderTitle >

src-docs/src/views/popover/trap_focus.js

@@ -48,23 +48,24 @@ export default class extends Component {
         button={button}
         isOpen={this.state.isPopoverOpen}
         closePopover={this.closePopover.bind(this)}
+        initialFocus="[id=asdf2]"
       >
         <EuiFormRow
           label="Generate a public snapshot?"
+          id="asdf"
         >
           <EuiSwitch
             name="switch"
-            id="asdf"
             label="Snapshot data"
           />
         </EuiFormRow>
 
         <EuiFormRow
           label="Include the following in the embed"
+          id="asdf2"
         >
           <EuiSwitch
             name="switch"
-            id="asdf2"
             label="Current time range"
           />
         </EuiFormRow>

src/components/form/switch/__snapshots__/switch.test.js.snap

@@ -8,6 +8,7 @@ exports[`EuiSwitch is rendered 1`] = `
     aria-label="aria-label"
     class="euiSwitch__input"
     data-test-subj="test subject string"
+    id="test"
     type="checkbox"
   />
   <span

src/components/form/switch/switch.js

@@ -13,7 +13,7 @@ export class EuiSwitch extends Component {
     super(props);
 
     this.state = {
-      id: props.id || makeId(),
+      switchId: props.id || makeId(),
     };
   }
 

src/components/modal/modal.js

@@ -22,6 +22,7 @@ export class EuiModal extends Component {
     const {
       className,
       children,
+      initialFocus,
       onClose, // eslint-disable-line no-unused-vars
       ...rest
     } = this.props;
@@ -32,6 +33,7 @@ export class EuiModal extends Component {
       <FocusTrap
         focusTrapOptions={{
           fallbackFocus: () => this.modal,
+          initialFocus: initialFocus,
         }}
       >
         {
@@ -65,4 +67,10 @@ EuiModal.propTypes = {
   className: PropTypes.string,
   children: PropTypes.node,
   onClose: PropTypes.func.isRequired,
+  /** specifies what element should initially have focus; Can be a DOM node, or a selector string (which will be passed to document.querySelector() to find the DOM node), or a function that returns a DOM node. */
+  initialFocus: PropTypes.oneOfType([
+    PropTypes.instanceOf(HTMLElement),
+    PropTypes.func,
+    PropTypes.string,
+  ]),
 };

src/components/overlay_mask/overlay_mask.js

@@ -33,11 +33,12 @@ export class EuiOverlayMask extends Component {
       }
       this.overlayMaskNode.setAttribute(key, rest[key]);
     });
+
+    document.body.appendChild(this.overlayMaskNode);
   }
 
   componentDidMount() {
     document.body.classList.add('euiBody-hasOverlayMask');
-    document.body.appendChild(this.overlayMaskNode);
   }
 
   componentWillUnmount() {

src/components/popover/popover.js

@@ -76,6 +76,13 @@ const DEFAULT_POPOVER_STYLES = {
 
 const GROUP_NUMERIC = /^([\d.]+)/;
 
+function getElementFromInitialFocus(initialFocus) {
+  const initialFocusType = typeof initialFocus;
+  if (initialFocusType === 'string') return document.querySelector(initialFocus);
+  if (initialFocusType === 'function') return initialFocus();
+  return initialFocus;
+}
+
 export class EuiPopover extends Component {
   static getDerivedStateFromProps(nextProps, prevState) {
     if (prevState.prevProps.isOpen && !nextProps.isOpen) {
@@ -139,10 +146,18 @@ export class EuiPopover extends Component {
       }
 
       // Otherwise let's focus the first tabbable item and expedite input from the user.
-      const tabbableItems = tabbable(this.panel);
-      if (tabbableItems.length) {
-        tabbableItems[0].focus();
+      let focusTarget;
+
+      if (this.props.initialFocus != null) {
+        focusTarget = getElementFromInitialFocus(this.props.initialFocus);
+      } else {
+        const tabbableItems = tabbable(this.panel);
+        if (tabbableItems.length) {
+          focusTarget = tabbableItems[0];
+        }
       }
+
+      if (focusTarget != null) focusTarget.focus();
     });
   }
 
@@ -193,7 +208,9 @@ export class EuiPopover extends Component {
       }, 250);
     }
 
-    this.updateFocus();
+    this.updateFocus(
+      !prevProps.isOpen && this.props.isOpen ? this.props.initialFocus : null
+    );
   }
 
   componentWillUnmount() {
@@ -307,6 +324,7 @@ export class EuiPopover extends Component {
       panelClassName,
       panelPaddingSize,
       popoverRef,
+      initialFocus, // eslint-disable-line no-unused-vars
       ...rest
     } = this.props;
 
@@ -436,6 +454,12 @@ EuiPopover.propTypes = {
   ]),
   /** When `true`, the popover's position is re-calculated when the user scrolls, this supports having fixed-position popover anchors. */
   repositionOnScroll: PropTypes.bool,
+  /** specifies what element should initially have focus; Can be a DOM node, or a selector string (which will be passed to document.querySelector() to find the DOM node), or a function that returns a DOM node. */
+  initialFocus: PropTypes.oneOfType([
+    PropTypes.instanceOf(HTMLElement),
+    PropTypes.func,
+    PropTypes.string,
+  ]),
 };
 
 EuiPopover.defaultProps = {