[EuiPopover] Handle initialFocus

CHANGELOG.md

@@ -1,6 +1,8 @@
 ## [`master`](https://github.com/elastic/eui/tree/master)
 
-No public interface changes since `32.3.0`.
+**Bug fixes**
+
+- Fixed `initialFocus` prop functionality in `EuiPopover` ([#4768](https://github.com/elastic/eui/pull/4768))
 
 ## [`32.3.0`](https://github.com/elastic/eui/tree/v32.3.0)
 

src-docs/src/views/form_layouts/inline_popover.js

@@ -122,7 +122,8 @@ export default () => {
         id="formPopover"
         button={button2}
         isOpen={isPopover2Open}
-        closePopover={closePopover2}>
+        closePopover={closePopover2}
+        initialFocus="[name='popfirst']">
         <div style={{ width: '300px' }}>{formSample2}</div>
       </EuiPopover>
     </div>

src/components/popover/popover.tsx

@@ -122,8 +122,10 @@ export interface EuiPopoverProps {
    * 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
+   * Set to `false` to prevent initial auto-focus. Use only
+   * when your app handles setting initial focus state.
    */
-  initialFocus?: FocusTarget;
+  initialFocus?: FocusTarget | false;
   /**
    * Passed directly to EuiPortal for DOM positioning. Both properties are
    * required if prop is specified
@@ -358,6 +360,7 @@ export class EuiPopover extends Component<Props, State> {
   private updateFocusAnimationFrame: number | undefined;
   private button: HTMLElement | null = null;
   private panel: HTMLElement | null = null;
+  private hasSetInitialFocus: boolean = false;
 
   constructor(props: Props) {
     super(props);
@@ -408,12 +411,19 @@ export class EuiPopover extends Component<Props, State> {
   updateFocus() {
     // Wait for the DOM to update.
     this.updateFocusAnimationFrame = window.requestAnimationFrame(() => {
-      if (!this.props.ownFocus || !this.panel) {
+      if (
+        !this.props.ownFocus ||
+        !this.panel ||
+        this.props.initialFocus === false
+      ) {
         return;
       }
 
       // If we've already focused on something inside the panel, everything's fine.
-      if (this.panel.contains(document.activeElement)) {
+      if (
+        this.hasSetInitialFocus &&
+        this.panel.contains(document.activeElement)
+      ) {
         return;
       }
 
@@ -453,7 +463,10 @@ export class EuiPopover extends Component<Props, State> {
         }
       }
 
-      if (focusTarget != null) focusTarget.focus();
+      if (focusTarget != null) {
+        this.hasSetInitialFocus = true;
+        focusTarget.focus();
+      }
     });
   }
 
@@ -506,8 +519,6 @@ export class EuiPopover extends Component<Props, State> {
     if (this.props.repositionOnScroll) {
       window.addEventListener('scroll', this.positionPopoverFixed);
     }
-
-    this.updateFocus();
   }
 
   componentDidUpdate(prevProps: Props) {
@@ -530,6 +541,7 @@ export class EuiPopover extends Component<Props, State> {
       // If the user has just closed the popover, queue up the removal of the content after the
       // transition is complete.
       this.closingTransitionTimeout = window.setTimeout(() => {
+        this.hasSetInitialFocus = false;
         this.setState({
           isClosing: false,
         });