From 4af97cf383bdeb022ab38a6fddbf72e9c33c6bff Mon Sep 17 00:00:00 2001 From: Brecht Van Lommel Date: Tue, 25 Jun 2024 16:24:15 +0200 Subject: [PATCH] Fix overflow menu flickering on mobile (#31484) The overflow menu button was incorrectly included in the measurement of the width of the items. As a result, it could get stuck in a loop alternating between different measurements as the button appears and disappears. --- 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) {