vertumnus
/
primevue-mirror
mirror of https://github.com/primefaces/primevue.git
1
0
Fork 0
Code Packages Releases Activity

Fixed #6578 - MegaMenu: mobile visual defects

pull/6579/head
tugcekucukoglu 2024-10-15 18:13:13 +03:00
parent fb017601e3
commit af13f15801
4 changed files with 17 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
packages/primevue/src/megamenu/BaseMegaMenu.vue
View File

@ -26,6 +26,10 @@ export default {
type: Number, type: Number,
default: 0 default: 0
}, },
scrollHeight: {
type: String,
default: '20rem'
},
ariaLabelledby: { ariaLabelledby: {
type: String, type: String,
default: null default: null

5
packages/primevue/src/megamenu/MegaMenu.d.ts vendored
View File

@ -261,6 +261,11 @@ export interface MegaMenuProps {
* Index of the element in tabbing order. * Index of the element in tabbing order.
*/ */
tabindex?: number | string | undefined; tabindex?: number | string | undefined;
/**
* Height of the viewport, a scrollbar is defined if height of list exceeds this value.
* @defaultValue 20rem
*/
scrollHeight?: string | undefined;
/** /**
* Defines a string value that labels an interactive element. * Defines a string value that labels an interactive element.
*/ */

9
packages/primevue/src/megamenu/MegaMenu.vue
View File

@ -43,6 +43,7 @@
:activeItem="activeItem" :activeItem="activeItem"
:mobileActive="mobileActive" :mobileActive="mobileActive"
:level="0" :level="0"
:style="sx('rootList')"
:pt="pt" :pt="pt"
:unstyled="unstyled" :unstyled="unstyled"
@focus="onFocus" @focus="onFocus"
@ -164,9 +165,8 @@ export default {
if (this.mobileActive) { if (this.mobileActive) {
this.mobileActive = false; this.mobileActive = false;
setTimeout(() => { setTimeout(() => {
focus(this.$refs.menubutton); focus(this.$refs.menubutton, { preventScroll: true });
this.scrollInView(); }, 1);
}, 100);
} }
this.activeItem = null; this.activeItem = null;
@ -290,8 +290,7 @@ export default {
this.dirty = !root; this.dirty = !root;
if (!this.mobileActive) { if (!this.mobileActive) {
focus(this.menubar); focus(this.menubar, { preventScroll: true });
this.menubar.scrollIntoView && this.menubar.scrollIntoView({ block: 'nearest', inline: 'nearest', behavior: 'smooth' });
} }
} else { } else {
if (grouped) { if (grouped) {

7
packages/primevue/src/megamenu/style/MegaMenuStyle.js
View File

@ -29,7 +29,7 @@ const theme = ({ dt }) => `
gap: ${dt('megamenu.gap')}; gap: ${dt('megamenu.gap')};
} }
.p-megamenu-root-list > .p-megamenu-item > .p-menumegamenubar-item-content { .p-megamenu-root-list > .p-megamenu-item > .p-menumega-item-content {
border-radius: ${dt('megamenu.base.item.border.radius')}; border-radius: ${dt('megamenu.base.item.border.radius')};
} }
@ -271,11 +271,11 @@ const theme = ({ dt }) => `
gap: ${dt('megamenu.submenu.gap')}; gap: ${dt('megamenu.submenu.gap')};
background: ${dt('megamenu.overlay.background')}; background: ${dt('megamenu.overlay.background')};
border: 1px solid ${dt('megamenu.overlay.border.color')}; border: 1px solid ${dt('megamenu.overlay.border.color')};
box-shadow: ${dt('menubar.overlay.shadow')}; box-shadow: ${dt('megamenu.overlay.shadow')};
} }
.p-megamenu-mobile-active .p-megamenu-root-list { .p-megamenu-mobile-active .p-megamenu-root-list {
display: flex; display: block;
} }
.p-megamenu-mobile .p-megamenu-root-list .p-megamenu-item { .p-megamenu-mobile .p-megamenu-root-list .p-megamenu-item {
@ -307,6 +307,7 @@ const theme = ({ dt }) => `
`; `;
const inlineStyles = { const inlineStyles = {
rootList: ({ props }) => ({ 'max-height': props.scrollHeight, overflow: 'auto' }),
submenu: ({ instance, processedItem }) => ({ display: instance.isItemActive(processedItem) ? 'block' : 'none' }) submenu: ({ instance, processedItem }) => ({ display: instance.isItemActive(processedItem) ? 'block' : 'none' })
}; };