diff --git a/packages/base/src/Device.js b/packages/base/src/Device.js index 93cd107e3728..39eb86201466 100644 --- a/packages/base/src/Device.js +++ b/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, diff --git a/packages/main/src/Popup.hbs b/packages/main/src/Popup.hbs index 9f8d21d79c77..65eba251445f 100644 --- a/packages/main/src/Popup.hbs +++ b/packages/main/src/Popup.hbs @@ -8,6 +8,8 @@ dir="{{effectiveDir}}" @keydown={{_onkeydown}} @focusout={{_onfocusout}} + @mouseup={{_onmouseup}} + @mousedown={{_onmousedown}} > diff --git a/packages/main/src/Popup.js b/packages/main/src/Popup.js index 689265dddefc..daf2b50c4064 100644 --- a/packages/main/src/Popup.js +++ b/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; } }