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 (
', () => { assertTabSelected(1); }); }); + + +test('preserves default className when className is undefined', () => { + const { container } = render( + {}} + > + + Tab + + Panel + + ); + + expect(container.firstChild).toHaveClass('react-tabs'); +}); + +test('preserves default className when className is null', () => { + const { container } = render( + {}} + > + + Tab + + Panel + + ); + + expect(container.firstChild).toHaveClass('react-tabs'); +});