From 7e06be80a07e5fc22a654b01dd7976bafc790ed8 Mon Sep 17 00:00:00 2001
From: shivam waghmare <waghmareshivam184@gmail.com>
Date: Fri, 16 Jan 2026 19:14:33 +0530
Subject: [PATCH] fix: preserve default className when className is null or
 undefined

---
 src/components/UncontrolledTabs.jsx    | 58 ++++++++++++++++++--------
 src/components/__tests__/Tabs-test.jsx | 36 ++++++++++++++++
 2 files changed, 76 insertions(+), 18 deletions(-)

diff --git a/src/components/UncontrolledTabs.jsx b/src/components/UncontrolledTabs.jsx
index 8e802b71d2..a09b349843 100644
--- a/src/components/UncontrolledTabs.jsx
+++ b/src/components/UncontrolledTabs.jsx
@@ -373,27 +373,49 @@ const UncontrolledTabs = (props) => {
     return false;
   }
   const {
-    children, // unused
-    className,
-    disabledTabClassName, // unused
+    className: propClassName,
     domRef,
-    focus, // unused
-    forceRenderTabPanel, // unused
-    onSelect, // unused
-    selectedIndex, // unused
-    selectedTabClassName, // unused
-    selectedTabPanelClassName, // unused
-    environment, // unused
-    disableUpDownKeys, // unused
-    disableLeftRightKeys, // unused
-    ...attributes
-  } = {
-    ...defaultProps,
-    ...props,
-  };
+    children, // unused here
+    disabledTabClassName, // unused here
+    focus, // unused here
+    forceRenderTabPanel, // unused here
+    onSelect, // unused here
+    selectedIndex, // unused here
+    selectedTabClassName, // unused here
+    selectedTabPanelClassName, // unused here
+    environment, // unused here
+    disableUpDownKeys, // unused here
+    disableLeftRightKeys, // unused here
+    ...restProps
+  } = props;
+
+  // Only pass valid DOM attributes and data- attributes
+  const domAttributes = {};
+  Object.keys(restProps).forEach((key) => {
+    if (
+      key.startsWith('data-') ||
+      key === 'id' ||
+      key === 'style' ||
+      key === 'title' ||
+      key === 'role' ||
+      key === 'tabIndex' ||
+      key === 'aria-label' ||
+      key === 'aria-labelledby' ||
+      key === 'aria-describedby' ||
+      key === 'aria-controls' ||
+      key === 'aria-selected' ||
+      key === 'aria-disabled'
+    ) {
+      domAttributes[key] = restProps[key];
+    }
+  });
+
+  const className =
+    propClassName == null ? defaultProps.className : propClassName;
+
   return (
     <div
-      {...attributes}
+      {...domAttributes}
       className={cx(className)}
       onClick={handleClick}
       onKeyDown={handleKeyDown}
diff --git a/src/components/__tests__/Tabs-test.jsx b/src/components/__tests__/Tabs-test.jsx
index 8010cb8efd..ac8cdac09d 100644
--- a/src/components/__tests__/Tabs-test.jsx
+++ b/src/components/__tests__/Tabs-test.jsx
@@ -3,6 +3,7 @@ import React from 'react';
 import { cleanup, render, screen, within } from '@testing-library/react';
 import { userEvent } from '@testing-library/user-event';
 import '@testing-library/jest-dom/vitest';
+import UncontrolledTabs from '../UncontrolledTabs';
 import Tab from '../Tab';
 import TabList from '../TabList';
 import TabPanel from '../TabPanel';
@@ -651,3 +652,38 @@ describe('<Tabs />', () => {
     assertTabSelected(1);
   });
 });
+
+
+test('preserves default className when className is undefined', () => {
+  const { container } = render(
+    <UncontrolledTabs
+      className={undefined}
+      selectedIndex={0}
+      onSelect={() => {}}
+    >
+      <TabList>
+        <Tab>Tab</Tab>
+      </TabList>
+      <TabPanel>Panel</TabPanel>
+    </UncontrolledTabs>
+  );
+
+  expect(container.firstChild).toHaveClass('react-tabs');
+});
+
+test('preserves default className when className is null', () => {
+  const { container } = render(
+    <UncontrolledTabs
+      className={null}
+      selectedIndex={0}
+      onSelect={() => {}}
+    >
+      <TabList>
+        <Tab>Tab</Tab>
+      </TabList>
+      <TabPanel>Panel</TabPanel>
+    </UncontrolledTabs>
+  );
+
+  expect(container.firstChild).toHaveClass('react-tabs');
+});