linden123/githaven-fork
1
1
Fork 0
forked from Shiloh/githaven
Code Pull Requests Activity

Fix overflow menu flickering on mobile (#31484)

Browse Source 
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.
This commit is contained in:
Brecht Van Lommel 2024-06-25 16:24:15 +02:00 committed by GitHub
parent 24f4ebb8a9
commit 4af97cf383
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 4 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
web_src/js/webcomponents/overflow-menu.js
View File

@ -61,6 +61,7 @@ window.customElements.define('overflow-menu', class extends HTMLElement {
} }
const itemFlexSpace = this.menuItemsEl.querySelector('.item-flex-space'); 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 // move items in tippy back into the menu items for subsequent measurement
for (const item of this.tippyItems || []) { 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 // 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'); itemFlexSpace?.style.setProperty('display', 'none', 'important');
itemOverFlowMenuButton?.style.setProperty('display', 'none', 'important');
this.tippyItems = []; this.tippyItems = [];
const menuRight = this.offsetLeft + this.offsetWidth; const menuRight = this.offsetLeft + this.offsetWidth;
const menuItems = this.menuItemsEl.querySelectorAll('.item, .item-flex-space'); 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'); itemFlexSpace?.style.removeProperty('display');
itemOverFlowMenuButton?.style.removeProperty('display');
// if there are no overflown items, remove any previously created button // if there are no overflown items, remove any previously created button
if (!this.tippyItems?.length) { if (!this.tippyItems?.length) {