diff --git a/components/lib/menubar/Menubar.vue b/components/lib/menubar/Menubar.vue index 6084a5d9b..62420da7a 100755 --- a/components/lib/menubar/Menubar.vue +++ b/components/lib/menubar/Menubar.vue @@ -61,6 +61,7 @@ export default { name: 'Menubar', extends: BaseMenubar, emits: ['focus', 'blur'], + matchMediaListener: null, data() { return { id: this.$attrs.id, @@ -69,6 +70,7 @@ export default { focusedItemInfo: { index: -1, level: 0, parentKey: '' }, activeItemPath: [], dirty: false, + query: null, queryMatches: false }; }, @@ -91,19 +93,13 @@ export default { menubar: null, mounted() { this.id = this.id || UniqueComponentId(); - const query = matchMedia(`(max-width: ${this.breakpoint})`); - - this.queryMatches = query.matches; - - query.addEventListener('change', () => { - this.queryMatches = query.matches; - this.mobileActive = false; - }); + this.bindMatchMediaListener(); }, beforeUnmount() { this.mobileActive = false; this.unbindOutsideClickListener(); this.unbindResizeListener(); + this.unbindMatchMediaListener(); if (this.container) { ZIndexUtils.clear(this.container); @@ -462,6 +458,27 @@ export default { this.resizeListener = null; } }, + bindMatchMediaListener() { + if (!this.matchMediaListener) { + const query = matchMedia(`(max-width: ${this.breakpoint})`); + + this.query = query; + this.queryMatches = query.matches; + + this.matchMediaListener = () => { + this.queryMatches = query.matches; + this.mobileActive = false; + }; + + this.query.addEventListener('change', this.matchMediaListener); + } + }, + unbindMatchMediaListener() { + if (this.matchMediaListener) { + this.query.removeEventListener('change', this.matchMediaListener); + this.matchMediaListener = null; + } + }, isItemMatched(processedItem) { return this.isValidItem(processedItem) && this.getProccessedItemLabel(processedItem).toLocaleLowerCase().startsWith(this.searchValue.toLocaleLowerCase()); },