diff --git a/public/app/features/dashboard-scene/edit-pane/DashboardEditPane.tsx b/public/app/features/dashboard-scene/edit-pane/DashboardEditPane.tsx index e2b7da6b4a2..b425fe9015e 100644 --- a/public/app/features/dashboard-scene/edit-pane/DashboardEditPane.tsx +++ b/public/app/features/dashboard-scene/edit-pane/DashboardEditPane.tsx @@ -1,6 +1,5 @@ import { css, cx } from '@emotion/css'; import { Resizable } from 're-resizable'; -import { useEffect } from 'react'; import { useLocalStorage } from 'react-use'; import { GrafanaTheme2 } from '@grafana/data'; @@ -191,21 +190,6 @@ export interface Props { * Making the EditPane rendering completely standalone (not using editPane.Component) in order to pass custom react props */ export function DashboardEditPaneRenderer({ editPane, isCollapsed, onToggleCollapse, openOverlay }: Props) { - // Activate the edit pane - useEffect(() => { - editPane.enableSelection(); - - return () => { - editPane.disableSelection(); - }; - }, [editPane]); - - useEffect(() => { - if (isCollapsed) { - editPane.clearSelection(); - } - }, [editPane, isCollapsed]); - const { selection } = useSceneObjectState(editPane, { shouldActivateOrKeepAlive: true }); const styles = useStyles2(getStyles); const editableElement = useEditableElement(selection, editPane); diff --git a/public/app/features/dashboard-scene/edit-pane/DashboardEditPaneSplitter.tsx b/public/app/features/dashboard-scene/edit-pane/DashboardEditPaneSplitter.tsx index 0b6bf54ecd2..2a77fc83e87 100644 --- a/public/app/features/dashboard-scene/edit-pane/DashboardEditPaneSplitter.tsx +++ b/public/app/features/dashboard-scene/edit-pane/DashboardEditPaneSplitter.tsx @@ -57,6 +57,17 @@ export function DashboardEditPaneSplitter({ dashboard, isEditing, body, controls setIsCollapsed(splitterState.collapsed); }, [splitterState.collapsed, setIsCollapsed]); + /** + * Enable / disable selection based on dashboard isEditing state + */ + useEffect(() => { + if (isEditing) { + editPane.enableSelection(); + } else { + editPane.clearSelection(); + } + }, [isEditing, editPane]); + const { selectionContext } = useSceneObjectState(editPane, { shouldActivateOrKeepAlive: true }); const containerStyle: CSSProperties = {};