From ebcec3cc20417528ffe80f0b11701af42b399939 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Wed, 19 May 2021 14:38:12 -0700
Subject: [PATCH] Add key to inspected-element error boundary (#21535)

This way changing the selected element also recreates/resets the boundary automatically.
---
 .../views/Components/InspectedElementErrorBoundary.js    | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

diff --git a/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementErrorBoundary.js b/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementErrorBoundary.js
index 8b892c8eaf7c0..249c37463660e 100644
--- a/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementErrorBoundary.js
+++ b/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementErrorBoundary.js
@@ -8,7 +8,9 @@
  */
 
 import * as React from 'react';
+import {useContext} from 'react';
 import ErrorBoundary from '../ErrorBoundary';
+import {TreeStateContext} from './TreeContext';
 import styles from './InspectedElementErrorBoundary.css';
 
 type WrapperProps = {|
@@ -18,9 +20,14 @@ type WrapperProps = {|
 export default function InspectedElementErrorBoundaryWrapper({
   children,
 }: WrapperProps) {
+  // Key on the selected element ID so that changing the selected element automatically hides the boundary.
+  // This seems best since an error inspecting one element isn't likely to be relevant to another element.
+  const {selectedElementID} = useContext(TreeStateContext);
   return (
     <div className={styles.Wrapper}>
-      <ErrorBoundary canDismiss={true}>{children}</ErrorBoundary>
+      <ErrorBoundary key={selectedElementID} canDismiss={true}>
+        {children}
+      </ErrorBoundary>
     </div>
   );
 }