diff --git a/packages/grafana-ui/src/components/PanelChrome/HoverWidget.tsx b/packages/grafana-ui/src/components/PanelChrome/HoverWidget.tsx index eb5c54d7b3b..0660b9a0118 100644 --- a/packages/grafana-ui/src/components/PanelChrome/HoverWidget.tsx +++ b/packages/grafana-ui/src/components/PanelChrome/HoverWidget.tsx @@ -16,17 +16,22 @@ interface Props { title?: string; offset?: number; dragClass?: string; + onDragStart?: (event: React.PointerEvent) => void; onOpenMenu?: () => void; } -export function HoverWidget({ menu, title, dragClass, children, offset = -32, onOpenMenu }: Props) { +export function HoverWidget({ menu, title, dragClass, children, offset = -32, onOpenMenu, onDragStart }: Props) { const styles = useStyles2(getStyles); const draggableRef = useRef(null); const selectors = e2eSelectors.components.Panels.Panel.HoverWidget; // Capture the pointer to keep the widget visible while dragging - const onPointerDown = useCallback((e: React.PointerEvent) => { - draggableRef.current?.setPointerCapture(e.pointerId); - }, []); + const onPointerDown = useCallback( + (e: React.PointerEvent) => { + draggableRef.current?.setPointerCapture(e.pointerId); + onDragStart?.(e); + }, + [onDragStart] + ); const onPointerUp = useCallback((e: React.PointerEvent) => { draggableRef.current?.releasePointerCapture(e.pointerId); diff --git a/packages/grafana-ui/src/components/PanelChrome/PanelChrome.tsx b/packages/grafana-ui/src/components/PanelChrome/PanelChrome.tsx index 28a395c7d98..8eace0b38b8 100644 --- a/packages/grafana-ui/src/components/PanelChrome/PanelChrome.tsx +++ b/packages/grafana-ui/src/components/PanelChrome/PanelChrome.tsx @@ -384,6 +384,7 @@ export function PanelChrome({ menu={menu} title={typeof title === 'string' ? title : undefined} dragClass={dragClass} + onDragStart={onDragStart} offset={hoverHeaderOffset} onOpenMenu={onOpenMenu} >