UI: Fix tab href race condition (#78458)

prevent tab clicking from activating the anchor's href

This prevents a very rare race condition when switching tabs very fast or when switching between tabs that update shortly after initial render.

packages/grafana-ui/src/components/Tabs/Tab.tsx

@@ -39,6 +39,14 @@ export const Tab = React.forwardRef<HTMLAnchorElement, TabProps>(
 
     const linkClass = cx(tabsStyles.link, active ? tabsStyles.activeStyle : tabsStyles.notActive);
 
+    // wraps the onClick handler with "event.preventDefault" – prevents a rare race condition between navigating to the "href" and "onClick" handler
+    const onClickHandler = onChangeTab
+      ? (event: React.MouseEvent<HTMLAnchorElement, MouseEvent>) => {
+          event.preventDefault();
+          onChangeTab(event);
+        }
+      : () => {};
+
     return (
       <div className={tabsStyles.item}>
         <a
@@ -46,7 +54,7 @@ export const Tab = React.forwardRef<HTMLAnchorElement, TabProps>(
           href={href ? href : '#'}
           className={linkClass}
           {...otherProps}
-          onClick={onChangeTab}
+          onClick={onClickHandler}
           aria-label={otherProps['aria-label'] || selectors.components.Tab.title(label)}
           role="tab"
           aria-selected={active}

packages/grafana-ui/src/components/Tabs/Tabs.story.tsx

@@ -51,6 +51,14 @@ export const Simple: Story = () => {
   );
 };
 
+export const withHref: Story = () => (
+  <DashboardStoryCanvas>
+    <TabsBar>
+      <Tab label={'to Google'} active={false} href="https://google.com/" />
+    </TabsBar>
+  </DashboardStoryCanvas>
+);
+
 export const Counter: Story<CounterProps> = (args) => {
   return <TabCounter {...args} />;
 };