[v11.0.x] Scenes: Fix crash when searching panel options (#85367)

Scenes: Fix crash when searching panel options (#85180)

Closes #81883

(cherry picked from commit 08ef6e1a42)

Co-authored-by: kay delaney <45561153+kaydelaney@users.noreply.github.com>

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 })}
+    />
+  );
+}