Description
Describe the bug
A clear and concise description of what the bug is.
Note: As this is a public repo, please be careful not to include details or screenshots from unreleased GitHub products or features. In most cases, a good bug report should be able to describe the new component without including business logic or feature details, but if you must discuss context relating to an unreleased feature, please open an issue in the private Design Systems repo and link to it here.
When using React Router links, with Primer components, primer tries to forward an activeClassName, as was exposed in the v5 and lower apis. React router v6 no longer supports this classname, so it gets dropped onto the dom, and causes the console warning in dev Warning: React does not recognize the activeClassNameprop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercaseactiveclassname instead. If you accidentally passed it from a parent component, remove it from the DOM element.
A workaround, also in the sandbox, exists, by manually filtering it, but that's a bit annoying
import "./styles.css";
import { TabNav } from "@primer/react";
import { BrowserRouter, Link } from "react-router-dom";
const FilteredActiveClassName = ({ activeClassName, ...props }) => {
return <Link {...props} />;
};
export default function App() {
return (
<BrowserRouter>
<div className="App">
<TabNav>
<TabNav.Link as={Link} to="/">
No filtering of prop
</TabNav.Link>
<TabNav.Link as={FilteredActiveClassName} to="/">
Filtered dom prop
</TabNav.Link>
</TabNav>
<h2>Start editing to see some magic happen!</h2>
</div>
</BrowserRouter>
);
}<nav class="TabNav__TabNavBody-sc-1ab407u-1 gXszLR">
<a activeclassname="selected" class="TabNav__TabNavLink-sc-1ab407u-2 eatcUG TabNav-item" href="/">
No filtering of prop
</a>
<a class="TabNav__TabNavLink-sc-1ab407u-2 eatcUG TabNav-item" href="/">
Filtered dom prop
</a>
</nav>To Reproduce
I built a small sandbox for this, related to tab nav, but it seems other components like sidenav do similar
https://codesandbox.io/s/still-https-5p2wb?file=/src/App.js
Expected behavior
activeClassName is not passed if not necessary (or not included on the as={} component)
Screenshots
If applicable, add screenshots to help explain your problem.
Desktop (please complete the following information):
- OS: [e.g. iOS]
- Browser [e.g. chrome, safari]
- Version [e.g. 22]
Smartphone (please complete the following information):
- Device: [e.g. iPhone6]
- OS: [e.g. iOS8.1]
- Browser [e.g. stock browser, safari]
- Version [e.g. 22]
Additional context
Add any other context about the problem here.