Ensure only visible tabs can be switched to

Author: ioedeveloper

apps/remix-ide/src/app/panels/tab-proxy.js

@@ -343,17 +343,29 @@ export default class TabProxy extends Plugin {
     if(!this.loadedTabs.find(tab => tab.name === name)) return // prevent removing tab that doesn't exist
     this.loadedTabs = this.loadedTabs.filter((tab, index) => {
       if (!previous && tab.name === name) {
-        if(index - 1  >= 0 && this.loadedTabs[index - 1])
-          previous = this.loadedTabs[index - 1]
-        else if (index + 1 && this.loadedTabs[index + 1])
-          previous = this.loadedTabs[index + 1]
+        previous = this.getPreviousVisibleTab(index)
+        if (!previous) previous = this.getNextVisibleTab(index)
       }
       return tab.name !== name
     })
     this.renderComponent()
     if (previous) this.switchTab(previous.name)
   }
 
+  getPreviousVisibleTab (index) {
+    for (let i = index - 1; i >= 0; i--) {
+      if (this.loadedTabs[i].show) return this.loadedTabs[i]
+    }
+    return null
+  }
+
+  getNextVisibleTab (index) {
+    for (let i = index + 1; i < this.loadedTabs.length; i++) {
+      if (this.loadedTabs[i].show) return this.loadedTabs[i]
+    }
+    return null
+  }
+
   addHandler (type, fn) {
     this.handlers[type] = fn
   }

libs/remix-ui/tabs/src/lib/remix-ui-tabs.tsx

@@ -622,7 +622,7 @@ export const TabsUI = (props: TabsUIProps) => {
             <div style={{ minWidth: '4rem', height: '1rem' }} id="dummyElForLastXVisibility"></div>
           </TabList>
           {props.tabs.map((tab) => (
-            <TabPanel key={tab.name}></TabPanel>
+            <TabPanel className={tab.show ? '' : 'd-none'} key={tab.name}></TabPanel>
           ))}
         </Tabs>