From 58b1ee5ebd5a28437cae44e10bb6bf34e95d464a Mon Sep 17 00:00:00 2001 From: Giteabot Date: Wed, 26 Jun 2024 01:13:04 +0800 Subject: [PATCH] Fix overflow menu flickering on mobile (#31484) (#31488) Backport #31484 by brechtvl Co-authored-by: Brecht Van Lommel --- web_src/js/webcomponents/overflow-menu.js | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/web_src/js/webcomponents/overflow-menu.js b/web_src/js/webcomponents/overflow-menu.js index 80dd1a545b..9fe8caba44 100644 --- a/web_src/js/webcomponents/overflow-menu.js +++ b/web_src/js/webcomponents/overflow-menu.js @@ -61,6 +61,7 @@ window.customElements.define('overflow-menu', class extends HTMLElement { } const itemFlexSpace = this.menuItemsEl.querySelector('.item-flex-space'); + const itemOverFlowMenuButton = this.querySelector('.overflow-menu-button'); // move items in tippy back into the menu items for subsequent measurement for (const item of this.tippyItems || []) { @@ -72,7 +73,9 @@ window.customElements.define('overflow-menu', class extends HTMLElement { } // measure which items are partially outside the element and move them into the button menu + // flex space and overflow menu are excluded from measurement itemFlexSpace?.style.setProperty('display', 'none', 'important'); + itemOverFlowMenuButton?.style.setProperty('display', 'none', 'important'); this.tippyItems = []; const menuRight = this.offsetLeft + this.offsetWidth; const menuItems = this.menuItemsEl.querySelectorAll('.item, .item-flex-space'); @@ -89,6 +92,7 @@ window.customElements.define('overflow-menu', class extends HTMLElement { } } itemFlexSpace?.style.removeProperty('display'); + itemOverFlowMenuButton?.style.removeProperty('display'); // if there are no overflown items, remove any previously created button if (!this.tippyItems?.length) {