diff --git a/packages/primevue/src/megamenu/MegaMenu.vue b/packages/primevue/src/megamenu/MegaMenu.vue index 4744a1bfd..31190a104 100755 --- a/packages/primevue/src/megamenu/MegaMenu.vue +++ b/packages/primevue/src/megamenu/MegaMenu.vue @@ -165,7 +165,8 @@ export default { this.mobileActive = false; setTimeout(() => { focus(this.$refs.menubutton); - }, 0); + this.scrollInView(); + }, 100); } this.activeItem = null; @@ -287,7 +288,11 @@ export default { this.focusedItemInfo = { index, key, parentKey }; this.dirty = !root; - focus(this.menubar); + + if (!this.mobileActive) { + focus(this.menubar); + this.menubar.scrollIntoView({ block: 'nearest', inline: 'nearest', behavior: 'smooth' }); + } } else { if (grouped) { this.onItemChange(event); @@ -603,10 +608,16 @@ export default { }, scrollInView(index = -1) { const id = index !== -1 ? `${this.id}_${index}` : this.focusedItemId; - const element = findSingle(this.menubar, `li[id="${id}"]`); + let element; + + if (id === null && this.queryMatches) { + element = this.$refs.menubutton; + } else { + element = findSingle(this.menubar, `li[id="${id}"]`); + } if (element) { - element.scrollIntoView && element.scrollIntoView({ block: 'nearest', inline: 'start' }); + element.scrollIntoView && element.scrollIntoView({ block: 'nearest', inline: 'nearest', behavior: 'smooth' }); } }, createProcessedItems(items, level = 0, parent = {}, parentKey = '', columnIndex) {