Switch tab activation to manual

When navigating the tab list with the arrow keys, the default behaviour of the Carbon components is to load the tab panel corresponding with the currently focused tab. Since some of the tab content in the Dashboard triggers additional network requests when rendered (e.g. step logs tab), set `activation="manual"` so that the user must click (or press space / enter) to activate the tab.
tektoncd · Jul 22, 2024 · b515257 · b515257
1 parent f8ad0c7
commit b515257
Show file tree

Hide file tree

Showing 3 changed files with 3 additions and 3 deletions.
diff --git a/packages/components/src/components/ResourceDetails/ResourceDetails.jsx b/packages/components/src/components/ResourceDetails/ResourceDetails.jsx
@@ -90,7 +90,7 @@ const ResourceDetails = ({
         onChange={event => onViewChange(tabs[event.selectedIndex])}
         selectedIndex={selectedTabIndex}
       >
-        <TabList>
+        <TabList activation="manual">
           <Tab>
             {intl.formatMessage({
               id: 'dashboard.resource.overviewTab',

diff --git a/packages/components/src/components/StepDetails/StepDetails.jsx b/packages/components/src/components/StepDetails/StepDetails.jsx
@@ -63,7 +63,7 @@ const StepDetails = ({
         onChange={event => onViewChange(tabs[event.selectedIndex])}
         selectedIndex={selectedTabIndex}
       >
-        <TabList>
+        <TabList activation="manual">
           <Tab>
             {intl.formatMessage({
               id: 'dashboard.taskRun.logs',

diff --git a/packages/components/src/components/TaskRunDetails/TaskRunDetails.jsx b/packages/components/src/components/TaskRunDetails/TaskRunDetails.jsx
@@ -282,7 +282,7 @@ const TaskRunDetails = ({
         onChange={event => onViewChange(tabs[event.selectedIndex])}
         selectedIndex={selectedTabIndex}
       >
-        <TabList>{tabList}</TabList>
+        <TabList activation="manual">{tabList}</TabList>
         <TabPanels>{tabPanels}</TabPanels>
       </Tabs>
     </div>