From 04911d9d856434226aa38774943924753be888a2 Mon Sep 17 00:00:00 2001
From: Lorenzo Blasa <lblasa@meta.com>
Date: Mon, 3 Apr 2023 04:39:25 -0700
Subject: [PATCH] Tabs need key now

Summary: Because Tabs now depend on the selected node (i.e. some nodes have events, some don't) they need to use a key.

Reviewed By: antonk52

Differential Revision: D44624658

fbshipit-source-id: 693983f6a82c090adae3a2e009873d903626ab75
---
 .../public/ui-debugger/components/sidebar/Inspector.tsx     | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/desktop/plugins/public/ui-debugger/components/sidebar/Inspector.tsx b/desktop/plugins/public/ui-debugger/components/sidebar/Inspector.tsx
index 417449f0d..2030a461a 100644
--- a/desktop/plugins/public/ui-debugger/components/sidebar/Inspector.tsx
+++ b/desktop/plugins/public/ui-debugger/components/sidebar/Inspector.tsx
@@ -49,8 +49,9 @@ export const Inspector: React.FC<Props> = ({nodes, metadata}) => {
 
   return (
     <Layout.Container gap pad>
-      <Tabs grow centered>
+      <Tabs grow centered key={selectedNodeId}>
         <Tab
+          key={'identity'}
           tab={
             <Tooltip title="Identity">
               <Layout.Horizontal center>
@@ -62,6 +63,7 @@ export const Inspector: React.FC<Props> = ({nodes, metadata}) => {
         </Tab>
 
         <Tab
+          key={'attributes'}
           tab={
             <Tooltip title="Attributes">
               <Layout.Horizontal center>
@@ -76,6 +78,7 @@ export const Inspector: React.FC<Props> = ({nodes, metadata}) => {
           />
         </Tab>
         <Tab
+          key={'layout'}
           tab={
             <Tooltip title="Layout">
               <Layout.Horizontal center>
@@ -95,6 +98,7 @@ export const Inspector: React.FC<Props> = ({nodes, metadata}) => {
         </Tab>
         {events && (
           <Tab
+            key={'events'}
             tab={
               <Tooltip title="Events">
                 <Layout.Horizontal center>