fix(ui): hide Tabs active indicator when no tab matches route

Signed-off-by: Johan Persson <johanopersson@gmail.com>

.changeset/two-zoos-teach.md

@@ -0,0 +1,7 @@
+---
+'@backstage/ui': patch
+---
+
+Fixed the Tabs active indicator not hiding when no tab matches the current route.
+
+**Affected components:** Tabs

packages/ui/src/components/Tabs/Tabs.module.css

@@ -26,6 +26,7 @@
     --active-tab-width: 0px;
     --active-tab-height: 0px;
     --active-transition-duration: 0s;
+    --active-tab-opacity: 0;
 
     --hovered-tab-left: 0px;
     --hovered-tab-right: 0px;
@@ -76,7 +77,7 @@
     border-radius: 4px;
     transition: left var(--active-transition-duration) ease-out,
       opacity 0.15s ease-out, width var(--active-transition-duration) ease-out;
-    opacity: 1;
+    opacity: var(--active-tab-opacity);
   }
 
   .bui-TabHovered {

packages/ui/src/components/Tabs/TabsIndicators.tsx

@@ -37,7 +37,7 @@ export const TabsIndicators = (props: TabsIndicatorsProps) => {
     const tabsRect = tabsRef.current.getBoundingClientRect();
 
     // Set active tab variables
-    if (state?.selectedKey) {
+    if (state?.selectedKey != null && state.selectedKey !== '') {
       const activeTab = tabRefs.current.get(state.selectedKey.toString());
 
       if (activeTab) {
@@ -98,7 +98,11 @@ export const TabsIndicators = (props: TabsIndicatorsProps) => {
           '--active-tab-height',
           `${activeRect.height}px`,
         );
+        tabsRef.current.style.setProperty('--active-tab-opacity', '1');
       }
+    } else {
+      tabsRef.current.style.setProperty('--active-tab-opacity', '0');
+      prevSelectedKey.current = null;
     }
 
     // Set hovered tab variables