Fix: cannot select names in hovercards in the reply dialog

Change-Id: I8756ea57f7db68d98e9ffbfb9b49474670a78b9f

polygerrit-ui/app/elements/shared/gr-hovercard/gr-hovercard-behavior.ts

diff --git a/polygerrit-ui/app/elements/shared/gr-hovercard/gr-hovercard-behavior.ts b/polygerrit-ui/app/elements/shared/gr-hovercard/gr-hovercard-behavior.ts
index 7ad7223..48de78e 100644
--- a/polygerrit-ui/app/elements/shared/gr-hovercard/gr-hovercard-behavior.ts
+++ b/polygerrit-ui/app/elements/shared/gr-hovercard/gr-hovercard-behavior.ts
@@ -35,6 +35,26 @@
 const HIDE_CLASS = 'hide';
 
 /**
+ * ID for the container element.
+ */
+const containerId = 'gr-hovercard-container';
+
+export function getHovercardContainer(
+  options: {createIfNotExists: boolean} = {createIfNotExists: false}
+): HTMLElement | null {
+  let container = getRootElement().querySelector<HTMLElement>(
+    `#${containerId}`
+  );
+  if (!container && options.createIfNotExists) {
+    // If it does not exist, create and initialize the hovercard container.
+    container = document.createElement('div');
+    container.setAttribute('id', containerId);
+    getRootElement().appendChild(container);
+  }
+  return container;
+}
+
+/**
  * How long should we wait before showing the hovercard when the user hovers
  * over the element?
  */
@@ -99,12 +119,6 @@
       @property({type: Object})
       container: HTMLElement | null = null;
 
-      /**
-       * ID for the container element.
-       */
-      @property({type: String})
-      containerId = 'gr-hovercard-container';
-
       private hideTask?: DelayedTask;
 
       private showTask?: DelayedTask;
@@ -147,16 +161,7 @@
       ready() {
         super.ready();
         // First, check to see if the container has already been created.
-        this.container = getRootElement().querySelector('#' + this.containerId);
-
-        if (this.container) {
-          return;
-        }
-
-        // If it does not exist, create and initialize the hovercard container.
-        this.container = document.createElement('div');
-        this.container.setAttribute('id', this.containerId);
-        getRootElement().appendChild(this.container);
+        this.container = getHovercardContainer({createIfNotExists: true});
       }
 
       removeListeners() {

polygerrit-ui/app/elements/shared/gr-overlay/gr-overlay.ts

diff --git a/polygerrit-ui/app/elements/shared/gr-overlay/gr-overlay.ts b/polygerrit-ui/app/elements/shared/gr-overlay/gr-overlay.ts
index 100d5cc..2c48ec0f 100644
--- a/polygerrit-ui/app/elements/shared/gr-overlay/gr-overlay.ts
+++ b/polygerrit-ui/app/elements/shared/gr-overlay/gr-overlay.ts
@@ -22,6 +22,7 @@
 import {IronOverlayBehavior} from '@polymer/iron-overlay-behavior/iron-overlay-behavior';
 import {findActiveElement} from '../../../utils/dom-util';
 import {fireEvent} from '../../../utils/event-util';
+import {getHovercardContainer} from '../gr-hovercard/gr-hovercard-behavior';
 
 const AWAIT_MAX_ITERS = 10;
 const AWAIT_STEP = 5;
@@ -118,6 +119,20 @@
     }
   }
 
+  _onCaptureFocus(e: Event) {
+    const hovercardContainer = getHovercardContainer();
+    if (hovercardContainer) {
+      // Hovercard container is not a child of an overlay.
+      // When an overlay is opened and a user clicks inside hovercard,
+      // the IronOverlayBehavior doesn't allow to set focus inside a hovercard.
+      // As a result, user can't select a text (username) in the hovercard
+      // in a dialog. We should skip default _onCaptureFocus for hovercards.
+      const path = e.composedPath();
+      if (path.indexOf(hovercardContainer) >= 0) return;
+    }
+    super._onCaptureFocus(e);
+  }
+
   /**
    * Override the focus stops that iron-overlay-behavior tries to find.
    */