From d6a29a62ea5b409699bab80a81cada0e50038763 Mon Sep 17 00:00:00 2001
From: Ben Loe <below413@gmail.com>
Date: Fri, 24 Sep 2021 11:55:27 -0400
Subject: [PATCH] Change active tab to preview for form builder nodes (#1456)

* change active tab to preview for form nodes

* use instance id for data panel key

Co-authored-by: Ben Loe <ben@pixiebrix.com>
---
 src/devTools/editor/tabs/editTab/EditTab.tsx          |  6 ++++--
 .../editor/tabs/editTab/dataPanel/DataPanel.tsx       | 11 ++---------
 2 files changed, 6 insertions(+), 11 deletions(-)

diff --git a/src/devTools/editor/tabs/editTab/EditTab.tsx b/src/devTools/editor/tabs/editTab/EditTab.tsx
index fff9a2c560..4618fb4fa7 100644
--- a/src/devTools/editor/tabs/editTab/EditTab.tsx
+++ b/src/devTools/editor/tabs/editTab/EditTab.tsx
@@ -191,6 +191,8 @@ const EditTab: React.FC<{
     [onSelectNode, pipelineFieldHelpers, blockPipeline]
   );
 
+  const blockInstanceId = blockPipeline[activeNodeIndex - 1]?.instanceId;
+
   return (
     <Tab.Pane eventKey={eventKey} className={styles.tabPane}>
       <div className={styles.paneContent}>
@@ -237,9 +239,9 @@ const EditTab: React.FC<{
         </div>
         <div className={styles.dataPanel}>
           <DataPanel
+            key={blockInstanceId}
             blockFieldName={blockFieldName}
-            // eslint-disable-next-line security/detect-object-injection
-            instanceId={blockPipeline[activeNodeIndex - 1]?.instanceId}
+            instanceId={blockInstanceId}
           />
         </div>
       </div>
diff --git a/src/devTools/editor/tabs/editTab/dataPanel/DataPanel.tsx b/src/devTools/editor/tabs/editTab/dataPanel/DataPanel.tsx
index 2b1bf1c6fb..99d9ed7408 100644
--- a/src/devTools/editor/tabs/editTab/dataPanel/DataPanel.tsx
+++ b/src/devTools/editor/tabs/editTab/dataPanel/DataPanel.tsx
@@ -15,7 +15,7 @@
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 
-import React, { useCallback, useContext, useMemo, useState } from "react";
+import React, { useContext, useMemo } from "react";
 import { UUID } from "@/core";
 import useInterval from "@/hooks/useInterval";
 import { isEmpty, pickBy, sortBy } from "lodash";
@@ -164,16 +164,9 @@ const DataPanel: React.FC<{
     (record && blockConfig) || previewInfo?.traceOptional;
 
   const defaultKey = showFormPreview ? "preview" : "output";
-  const [activeTabKey, setActiveTabKey] = useState<string>(defaultKey);
-  const handleSelect = useCallback(
-    (eventKey: string) => {
-      setActiveTabKey(eventKey);
-    },
-    [setActiveTabKey]
-  );
 
   return (
-    <Tab.Container activeKey={activeTabKey} onSelect={handleSelect}>
+    <Tab.Container defaultActiveKey={defaultKey}>
       <Nav variant="tabs">
         <Nav.Item className={styles.tabNav}>
           <Nav.Link eventKey="context">Context</Nav.Link>