From e7eb729c335f9ecdc128355b3ede4210cadbbbc7 Mon Sep 17 00:00:00 2001
From: Nick Mitchell <nickm@us.ibm.com>
Date: Mon, 13 Sep 2021 10:53:30 -0400
Subject: [PATCH] fix(plugins/plugin-client-common): If Tab is closed soon
 after it is created, console errors can appear

part of #7965
---
 .../src/components/Client/TabContent.tsx        |  8 ++++----
 .../src/components/Client/TopTabStripe/Tab.tsx  | 17 +++++++++++------
 2 files changed, 15 insertions(+), 10 deletions(-)

diff --git a/plugins/plugin-client-common/src/components/Client/TabContent.tsx b/plugins/plugin-client-common/src/components/Client/TabContent.tsx
index ccf69dd75a4..4ec6b1c03dc 100644
--- a/plugins/plugin-client-common/src/components/Client/TabContent.tsx
+++ b/plugins/plugin-client-common/src/components/Client/TabContent.tsx
@@ -99,11 +99,11 @@ export default class TabContent extends React.PureComponent<Props, State> {
     const onTabNew = () => {
       this.setState({ sessionInit: 'Done' })
 
-      if (this.state._terminal.current) {
-        setTimeout(() => {
+      setTimeout(() => {
+        if (this.state._terminal.current) {
           this.state._terminal.current.doFocusIfNeeded()
-        }, 300)
-      }
+        }
+      }, 300)
 
       try {
         if (this.props.onTabReady) {
diff --git a/plugins/plugin-client-common/src/components/Client/TopTabStripe/Tab.tsx b/plugins/plugin-client-common/src/components/Client/TopTabStripe/Tab.tsx
index 973d5b4690c..e165c400bf1 100644
--- a/plugins/plugin-client-common/src/components/Client/TopTabStripe/Tab.tsx
+++ b/plugins/plugin-client-common/src/components/Client/TopTabStripe/Tab.tsx
@@ -59,6 +59,8 @@ interface State {
 }
 
 export default class Tab extends React.PureComponent<Props, State> {
+  private _unmounted = false
+
   private readonly closeTabRef = React.createRef<HTMLDivElement>()
 
   private onCommandStart: (evt: Event) => void
@@ -78,7 +80,7 @@ export default class Tab extends React.PureComponent<Props, State> {
     if (!props.topTabNames) {
       setTimeout(async () => {
         const { theme } = await findThemeByName((await getPersistedThemeChoice()) || (await getDefaultTheme()))
-        if (theme.topTabNames) {
+        if (theme.topTabNames && !this._unmounted) {
           this.setState({
             topTabNames: theme.topTabNames
           })
@@ -90,6 +92,7 @@ export default class Tab extends React.PureComponent<Props, State> {
   }
 
   public componentWillUnmount() {
+    this._unmounted = true
     this.removeCommandEvaluationListeners()
   }
 
@@ -105,7 +108,7 @@ export default class Tab extends React.PureComponent<Props, State> {
    */
   private addCommandEvaluationListeners() {
     this.onCommandComplete = (event: Event) => {
-      if (this.props.uuid === event.tab.state.uuid) {
+      if (this.props.uuid === event.tab.state.uuid && !this._unmounted) {
         if (event.execType !== undefined && event.execType !== ExecType.Nested && event.route) {
           // ignore nested, which means one plugin calling another
           this.setState({ processing: false })
@@ -116,7 +119,7 @@ export default class Tab extends React.PureComponent<Props, State> {
     }
 
     this.onCommandStart = (event: Event) => {
-      if (this.props.uuid === event.tab.state.uuid) {
+      if (this.props.uuid === event.tab.state.uuid && !this._unmounted) {
         if (event.execType !== undefined && event.execType !== ExecType.Nested && event.route) {
           // ignore nested, which means one plugin calling another
           // debug('got event', event)
@@ -136,9 +139,11 @@ export default class Tab extends React.PureComponent<Props, State> {
     }
 
     this.onThemeChange = ({ themeModel }: { themeModel: Theme }) => {
-      this.setState({
-        topTabNames: themeModel.topTabNames || 'fixed'
-      })
+      if (!this._unmounted) {
+        this.setState({
+          topTabNames: themeModel.topTabNames || 'fixed'
+        })
+      }
     }
 
     eventBus.onCommandStart(this.props.uuid, this.onCommandStart)