IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-25 18:55:37 -06:00
Code Issues Packages Projects Releases Wiki Activity

Popover Menu: fix issue hiding menu behind scrollable container (#84311)

Browse Source 
* PopoverMenu: change position to fixed

* PopoverMenu: close on empty selectionchange

* Popover Menu: do not let menu overflow the window dimensions

* Prettier
This commit is contained in:
Matias Chomicki 2024-03-13 12:41:18 +01:00 committed by GitHub
parent 6599fa805d
commit a89f1c2200
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 10 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
public/app/features/explore/Logs/PopoverMenu.tsx
View File

@ -94,7 +94,7 @@ function track(action: string, selectionLength: number, dataSourceType: string |
const getStyles = (theme: GrafanaTheme2) => ({ const getStyles = (theme: GrafanaTheme2) => ({
menu: css({ menu: css({
position: 'absolute', position: 'fixed',
zIndex: theme.zIndex.modal, zIndex: theme.zIndex.modal,
}), }),
}); });

11
public/app/features/logs/components/LogRows.tsx
View File

@ -121,14 +121,20 @@ class UnThemedLogRows extends PureComponent<Props, State> {
if (!this.logRowsRef.current) { if (!this.logRowsRef.current) {
return false; return false;
} }
const parentBounds = this.logRowsRef.current?.getBoundingClientRect();
const MENU_WIDTH = 270;
const MENU_HEIGHT = 105;
const x = e.clientX + MENU_WIDTH > window.innerWidth ? window.innerWidth - MENU_WIDTH : e.clientX;
const y = e.clientY + MENU_HEIGHT > window.innerHeight ? window.innerHeight - MENU_HEIGHT : e.clientY;
this.setState({ this.setState({
selection, selection,
popoverMenuCoordinates: { x: e.clientX - parentBounds.left, y: e.clientY - parentBounds.top }, popoverMenuCoordinates: { x, y },
selectedRow: row, selectedRow: row,
}); });
document.addEventListener('click', this.handleDeselection); document.addEventListener('click', this.handleDeselection);
document.addEventListener('contextmenu', this.handleDeselection); document.addEventListener('contextmenu', this.handleDeselection);
document.addEventListener('selectionchange', this.handleDeselection);
return true; return true;
}; };
@ -147,6 +153,7 @@ class UnThemedLogRows extends PureComponent<Props, State> {
closePopoverMenu = () => { closePopoverMenu = () => {
document.removeEventListener('click', this.handleDeselection); document.removeEventListener('click', this.handleDeselection);
document.removeEventListener('contextmenu', this.handleDeselection); document.removeEventListener('contextmenu', this.handleDeselection);
document.removeEventListener('selectionchange', this.handleDeselection);
this.setState({ this.setState({
selection: '', selection: '',
popoverMenuCoordinates: { x: 0, y: 0 }, popoverMenuCoordinates: { x: 0, y: 0 },