fix(SideNav): update check to verify selected sidebar item (#291)

Author: tonghauhive

src/SideNav/SideNavButton.tsx

@@ -2,7 +2,7 @@ import * as React from 'react';
 import { useContext } from 'react';
 import classNames from 'classnames';
 import PropTypes from 'prop-types';
-import SideNavContext, { SideNavEventKey } from './SideNavContext';
+import SideNavContext, { SideNavEventKey, isSideNavItemSelected } from './SideNavContext';
 import SideNavItemContext from './SideNavItemContext';
 import {
   BsPrefixProps,
@@ -15,7 +15,7 @@ type EventHandler = React.EventHandler<React.SyntheticEvent>;
 
 export interface SideNavButtonProps
   extends React.ButtonHTMLAttributes<HTMLButtonElement>,
-    BsPrefixProps {
+  BsPrefixProps {
   /** Providing a `href` will render an `<a>` element, _styled_ as a button. */
   href?: string;
 }
@@ -108,12 +108,12 @@ export const SideNavButton: BsPrefixRefForwardingComponent<
         onClick={sideNavOnClick}
         {...props}
         aria-expanded={eventKey === activeEventKey}
-        aria-haspopup="menu"
+        aria-haspopup='menu'
         className={classNames(
           className,
           setCollapseCSS(activeEventKey, eventKey),
           // add active class when sidenav item is open or when multiple side nav items are open during alwaysOpen
-          (eventKey === activeEventKey || activeEventKey?.includes(eventKey)) && "active"
+          isSideNavItemSelected(activeEventKey, eventKey) ? 'active' : ''
         )}
       >
         {children}

tests/SideNav/SideNav.test.tsx

@@ -323,6 +323,11 @@ const Component = ({alwaysOpen, initialActiveKey}: ComponentProps) => {
           SideNav Item #3
         </SideNav.Button>
       </SideNav.Item>
+      <SideNav.Item eventKey="00">
+        <SideNav.Button onClick={() => clickButtonLink('00')} href="#">
+          SideNav Item #11
+        </SideNav.Button>
+      </SideNav.Item>
     </SideNav>
   );
 };
@@ -377,6 +382,9 @@ describe('Active style added to Sidenav when ', () => {
     expect(container.querySelectorAll('.btn')[2].classList).not.toContain(
       'active'
     );
+    expect(container.querySelectorAll('.btn')[3].classList).not.toContain(
+      'active'
+    );
 
     fireEvent.click(getByText('SideNav Item #1'));
     await waitFor(() => {
@@ -389,6 +397,25 @@ describe('Active style added to Sidenav when ', () => {
       expect(container.querySelectorAll('.btn')[2].classList).not.toContain(
         'active'
       );
+      expect(container.querySelectorAll('.btn')[3].classList).not.toContain(
+        'active'
+      );
+    });
+
+    fireEvent.click(getByText('SideNav Item #11'));
+    await waitFor(() => {
+      expect(container.querySelectorAll('.btn')[0].classList).not.toContain(
+        'active'
+      );
+      expect(container.querySelectorAll('.btn')[1].classList).not.toContain(
+        'active'
+      );
+      expect(container.querySelectorAll('.btn')[2].classList).not.toContain(
+        'active'
+      );
+      expect(container.querySelectorAll('.btn')[3].classList).toContain(
+        'active'
+      );
     });
   })
   it("on click on sidenav button in alwaysOpen mode", async() => {
@@ -403,6 +430,9 @@ describe('Active style added to Sidenav when ', () => {
     expect(container.querySelectorAll('.btn')[2].classList).not.toContain(
       'active'
     );
+    expect(container.querySelectorAll('.btn')[3].classList).not.toContain(
+      'active'
+    );
 
     // fireEvent.click(getByText('SideNav Item #1'));
     // await waitFor(() => {
@@ -418,4 +448,4 @@ describe('Active style added to Sidenav when ', () => {
     // });
   })
 
-})
+})