From 08ef6e1a42a7f374870fc055127fe075cf272503 Mon Sep 17 00:00:00 2001
From: kay delaney <45561153+kaydelaney@users.noreply.github.com>
Date: Tue, 26 Mar 2024 14:55:54 +0000
Subject: [PATCH] Scenes: Fix crash when searching panel options (#85180)

Closes #81883
---
 .../PanelEditor/getPanelFrameOptions.tsx      | 38 +++++++++++--------
 1 file changed, 22 insertions(+), 16 deletions(-)

diff --git a/public/app/features/dashboard/components/PanelEditor/getPanelFrameOptions.tsx b/public/app/features/dashboard/components/PanelEditor/getPanelFrameOptions.tsx
index f03f6884b8e..e18a9ce2fa1 100644
--- a/public/app/features/dashboard/components/PanelEditor/getPanelFrameOptions.tsx
+++ b/public/app/features/dashboard/components/PanelEditor/getPanelFrameOptions.tsx
@@ -214,14 +214,7 @@ export function getPanelFrameCategory2(
         value: panel.state.title,
         popularRank: 1,
         render: function renderTitle() {
-          const { title } = panel.useState();
-          return (
-            <Input
-              id="PanelFrameTitle"
-              value={title}
-              onChange={(e) => panel.setState({ title: e.currentTarget.value })}
-            />
-          );
+          return <PanelFrameTitle panel={panel} />;
         },
         addon: config.featureToggles.dashgpt && (
           <GenAIPanelTitleButton
@@ -237,14 +230,7 @@ export function getPanelFrameCategory2(
         title: 'Description',
         value: panel.state.description,
         render: function renderDescription() {
-          const { description } = panel.useState();
-          return (
-            <TextArea
-              id="description-text-area"
-              value={description}
-              onChange={(e) => panel.setState({ description: e.currentTarget.value })}
-            />
-          );
+          return <DescriptionTextArea panel={panel} />;
         },
         addon: config.featureToggles.dashgpt && (
           <GenAIPanelDescriptionButton
@@ -369,3 +355,23 @@ function ScenePanelLinksEditor({ panelLinks }: ScenePanelLinksEditorProps) {
     />
   );
 }
+
+function PanelFrameTitle({ panel }: { panel: VizPanel }) {
+  const { title } = panel.useState();
+
+  return (
+    <Input id="PanelFrameTitle" value={title} onChange={(e) => panel.setState({ title: e.currentTarget.value })} />
+  );
+}
+
+function DescriptionTextArea({ panel }: { panel: VizPanel }) {
+  const { description } = panel.useState();
+
+  return (
+    <TextArea
+      id="description-text-area"
+      value={description}
+      onChange={(e) => panel.setState({ description: e.currentTarget.value })}
+    />
+  );
+}