From ff4047f7f2bb81183df87217bb92ef54c4e1e7e3 Mon Sep 17 00:00:00 2001 From: "Ghislain B." Date: Sun, 6 Oct 2024 00:31:40 -0400 Subject: [PATCH] fix: reposition column picker to always be visible (#1069) - similar to auto-positioning of Header Menu, we can auto-position left/right Column Picker with viewport available space --- src/controls/slick.columnpicker.ts | 23 +++++++++++++++++------ 1 file changed, 17 insertions(+), 6 deletions(-) diff --git a/src/controls/slick.columnpicker.ts b/src/controls/slick.columnpicker.ts index aaeb115b..918981d1 100644 --- a/src/controls/slick.columnpicker.ts +++ b/src/controls/slick.columnpicker.ts @@ -225,12 +225,23 @@ export class SlickColumnPicker { protected repositionMenu(event: DOMMouseOrTouchEvent | SlickEventData) { const targetEvent: MouseEvent | Touch = (event as TouchEvent)?.touches?.[0] ?? event; - this._menuElm.style.top = `${targetEvent.pageY - 10}px`; - this._menuElm.style.left = `${targetEvent.pageX - 10}px`; - this._menuElm.style.maxHeight = `${window.innerHeight - targetEvent.clientY}px`; - this._menuElm.style.display = 'block'; - this._menuElm.setAttribute('aria-expanded', 'true'); - this._menuElm.appendChild(this._listElm); + if (this._menuElm) { + this._menuElm.style.display = 'block'; + + // auto-positioned menu left/right by available position + const gridPos = this.grid.getGridPosition(); + const menuWidth = this._menuElm.clientWidth || 0; + let menuOffsetLeft = targetEvent.pageX || 0; + if (gridPos?.width && (menuOffsetLeft + menuWidth >= gridPos.width)) { + menuOffsetLeft = menuOffsetLeft - menuWidth; + } + + this._menuElm.style.top = `${targetEvent.pageY - 10}px`; + this._menuElm.style.left = `${menuOffsetLeft}px`; + this._menuElm.style.maxHeight = `${window.innerHeight - targetEvent.clientY}px`; + this._menuElm.setAttribute('aria-expanded', 'true'); + this._menuElm.appendChild(this._listElm); + } } protected updateColumnOrder() {