fix(ui5-dialog): fix text selection on chrome (#3532)

On Chrome, clicking on slotted elements (light DOM) in the
dialog (shadow DOM) causes the focus to travel up the light DOM tree to
reach the closes element that is focusable.
Which ends to be the body element as document.activeElement.

This is not the case for FF & Safari, where the focus travels up the
slot, reaching the dialog root which is actually the closest focusable element.

This change introduces a workaround to align the focus behaviour in Chrome
with the other browsers.

Related issue: WICG/webcomponents#773
Fixes #3466

Author: georgimkv

packages/base/src/Device.js

@@ -75,6 +75,7 @@ const detectTablet = () => {
 const supportsTouch = () => touch;
 const isIE = () => ie;
 const isSafari = () => safari;
+const isChrome = () => chrome;
 
 const isTablet = () => {
 	detectTablet();
@@ -94,6 +95,7 @@ export {
 	supportsTouch,
 	isIE,
 	isSafari,
+	isChrome,
 	isPhone,
 	isTablet,
 	isDesktop,

packages/main/src/Popup.hbs

@@ -8,6 +8,8 @@
 	dir="{{effectiveDir}}"
 	@keydown={{_onkeydown}}
 	@focusout={{_onfocusout}}
+	@mouseup={{_onmouseup}}
+	@mousedown={{_onmousedown}}
 >
 
 	<span class="first-fe" data-ui5-focus-trap tabindex="0" @focusin={{forwardToLast}}></span>

packages/main/src/Popup.js

@@ -1,6 +1,7 @@
 import { renderFinished } from "@ui5/webcomponents-base/dist/Render.js";
 import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
 import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
+import { isChrome } from "@ui5/webcomponents-base/dist/Device.js";
 import { getFirstFocusableElement, getLastFocusableElement } from "@ui5/webcomponents-base/dist/util/FocusableElements.js";
 import createStyleInHead from "@ui5/webcomponents-base/dist/util/createStyleInHead.js";
 import { isTabPrevious } from "@ui5/webcomponents-base/dist/Keys.js";
@@ -278,10 +279,30 @@ class Popup extends UI5Element {
 	}
 
 	_onfocusout(e) {
-		// relatedTarget is the element, which will get focus. If no such element exists, focus the root
+		// relatedTarget is the element, which will get focus. If no such element exists, focus the root.
+		// This happens after the mouse is released in order to not interrupt text selection.
 		if (!e.relatedTarget) {
-			this._root.tabIndex = -1;
-			this._root.focus();
+			this._shouldFocusRoot = true;
+		}
+	}
+
+	_onmousedown(e) {
+		this._root.removeAttribute("tabindex");
+
+		if (this.shadowRoot.contains(e.target)) {
+			this._shouldFocusRoot = true;
+		} else {
+			this._shouldFocusRoot = false;
+		}
+	}
+
+	_onmouseup() {
+		this._root.tabIndex = -1;
+		if (this._shouldFocusRoot) {
+			if (isChrome()) {
+				this._root.focus();
+			}
+			this._shouldFocusRoot = false;
 		}
 	}