diff --git a/web_src/js/components/DashboardRepoList.vue b/web_src/js/components/DashboardRepoList.vue index bbe226ee6e..fc6a7bd281 100644 --- a/web_src/js/components/DashboardRepoList.vue +++ b/web_src/js/components/DashboardRepoList.vue @@ -391,7 +391,7 @@ export default defineComponent({ </div> </div> </div> - <overflow-menu class="ui secondary pointing tabular borderless menu repos-filter" :active="reposFilter"> + <overflow-menu class="ui secondary pointing tabular borderless menu repos-filter"> <div class="overflow-menu-items tw-justify-center"> <a class="item" tabindex="0" :class="{active: reposFilter === 'all'}" @click="changeReposFilter('all')"> {{ textAll }} diff --git a/web_src/js/webcomponents/overflow-menu.ts b/web_src/js/webcomponents/overflow-menu.ts index a3ebf7b3fc..bc86c756d1 100644 --- a/web_src/js/webcomponents/overflow-menu.ts +++ b/web_src/js/webcomponents/overflow-menu.ts @@ -4,8 +4,6 @@ import {isDocumentFragmentOrElementNode, toggleClass} from '../utils/dom.ts'; import octiconKebabHorizontal from '../../../public/assets/img/svg/octicon-kebab-horizontal.svg'; window.customElements.define('overflow-menu', class extends HTMLElement { - static observedAttributes = ['active']; - tippyContent: HTMLDivElement; tippyItems: Array<HTMLElement>; button: HTMLButtonElement; @@ -104,7 +102,16 @@ window.customElements.define('overflow-menu', class extends HTMLElement { const itemRight = item.offsetLeft + item.offsetWidth; if (menuRight - itemRight < 38) { // roughly the width of .overflow-menu-button with some extra space this.tippyItems.push(item); + + // close tippy when clicking item of tippy + item.addEventListener('click', () => { + this.button?._tippy.hide(); + }); } + // refresh overflow-button active state + item.addEventListener('click', () => { + this.updateButtonActivationState(); + }); } itemFlexSpace?.style.removeProperty('display'); itemOverFlowMenuButton?.style.removeProperty('display'); @@ -130,14 +137,6 @@ window.customElements.define('overflow-menu', class extends HTMLElement { this.tippyContent.append(item); } - // close tippy when clicking item of tippy - const items = this.tippyContent.querySelectorAll<HTMLElement>('.item'); - for (const item of items) { - item.addEventListener('click', () => { - this.button?._tippy.hide(); - }); - } - // update existing tippy if (this.button?._tippy) { this.button._tippy.setContent(this.tippyContent); @@ -235,10 +234,6 @@ window.customElements.define('overflow-menu', class extends HTMLElement { } } - attributeChangedCallback() { - this.updateButtonActivationState(); - } - disconnectedCallback() { this.mutationObserver?.disconnect(); this.resizeObserver?.disconnect();