Skip to content

Commit f349117

Browse files
committed
fix(NcActions): handle expensive height computation by popover library
- `autoBoundaryMaxSize` lets floating vue resize the popper inner container to the available size Signed-off-by: Maksim Sukharev <antreesy.web@gmail.com>
1 parent f9b3a27 commit f349117

File tree

1 file changed

+1
-55
lines changed

1 file changed

+1
-55
lines changed

src/components/NcActions/NcActions.vue

Lines changed: 1 addition & 55 deletions
Original file line numberDiff line numberDiff line change
@@ -1476,7 +1476,6 @@ export default {
14761476
onOpened() {
14771477
this.$nextTick(() => {
14781478
this.focusFirstAction(null)
1479-
this.resizePopover()
14801479
14811480
/**
14821481
* Event emitted when the popover menu is opened.
@@ -1487,59 +1486,6 @@ export default {
14871486
})
14881487
},
14891488
1490-
/**
1491-
* Handle resizing the popover to make sure users can discover there is more to scroll
1492-
*/
1493-
resizePopover() {
1494-
// Get the inner v-popper element that defines the popover height (from floating-vue)
1495-
const inner = this.$refs.menu.closest('.v-popper__inner')
1496-
const height = this.$refs.menu.clientHeight
1497-
const maxMenuHeight = this.getMaxMenuHeight()
1498-
1499-
// If the popover height is limited by the max-height (scrollbars shown) limit the height to half of the last element
1500-
if (height > maxMenuHeight) {
1501-
// sum of action heights
1502-
let currentHeight = 0
1503-
// last action height
1504-
let actionHeight = 0
1505-
for (const action of this.$refs.menuList.children) {
1506-
// If the max height would be overflown by half of the current element,
1507-
// then we limit the height to the half of the previous element
1508-
if ((currentHeight + action.clientHeight / 2) > maxMenuHeight) {
1509-
inner.style.height = `${currentHeight - actionHeight / 2}px`
1510-
break
1511-
}
1512-
// otherwise sum up the height
1513-
actionHeight = action.clientHeight
1514-
currentHeight += actionHeight
1515-
}
1516-
} else {
1517-
inner.style.height = 'fit-content'
1518-
}
1519-
},
1520-
1521-
getMaxMenuHeight() {
1522-
const { top, bottom } = this.$refs.triggerButton?.$el.getBoundingClientRect() ?? { top: 0, bottom: 0 }
1523-
const { top: boundaryTop, bottom: boundaryBottom } = this.boundariesElement?.getBoundingClientRect() ?? { top: 0, bottom: window.innerHeight }
1524-
1525-
return Math.max(
1526-
// Either expand to the top
1527-
Math.min(
1528-
// max height is the top position of the trigger minus the header height minus the wedge and the padding
1529-
top - 84,
1530-
// and also limited to the space in the boundary
1531-
top - boundaryTop,
1532-
),
1533-
// or expand to the bottom
1534-
Math.min(
1535-
// the max height is the window height minus current position of the trigger minus the wedge and padding
1536-
window.innerHeight - bottom - 34,
1537-
// and limit to the available space in the boundary
1538-
boundaryBottom - bottom,
1539-
),
1540-
)
1541-
},
1542-
15431489
// MENU KEYS & FOCUS MANAGEMENT
15441490
/**
15451491
* @return {HTMLElement|null}
@@ -1927,6 +1873,7 @@ export default {
19271873
shown: this.opened,
19281874
placement: this.placement,
19291875
boundary: this.boundariesElement,
1876+
autoBoundaryMaxSize: true,
19301877
container: this.container,
19311878
popoverBaseClass: 'action-item__popper',
19321879
popupRole: this.config.popupRole,
@@ -2017,7 +1964,6 @@ export default {
20171964
// Mostly used when clicking a menu item
20181965
this.$nextTick(() => {
20191966
if (this.opened && this.$refs.menu) {
2020-
this.resizePopover()
20211967
const isAnyActive = this.$refs.menu.querySelector('li.active') || []
20221968
if (isAnyActive.length === 0) {
20231969
this.focusFirstAction()

0 commit comments

Comments
 (0)