fix(ListGroupItem): fix .active not being set with activeKey in ListGroup (react-bootstrap#6002)

Author: kyletsang

src/ListGroupItem.tsx

@@ -1,10 +1,12 @@
 import classNames from 'classnames';
 import * as React from 'react';
-import { useCallback } from 'react';
 import PropTypes from 'prop-types';
-import BaseNavItem, {
+import useEventCallback from '@restart/hooks/useEventCallback';
+import {
+  useNavItem,
   NavItemProps as BaseNavItemProps,
 } from '@restart/ui/NavItem';
+import { makeEventKey } from '@restart/ui/SelectableContext';
 import { useBootstrapPrefix } from './ThemeProvider';
 import { BsPrefixProps, BsPrefixRefForwardingComponent } from './helpers';
 import { Variant } from './types';
@@ -58,59 +60,57 @@ const propTypes = {
   as: PropTypes.elementType,
 };
 
-const defaultProps = {
-  variant: undefined,
-  active: false,
-  disabled: false,
-};
-
 const ListGroupItem: BsPrefixRefForwardingComponent<'a', ListGroupItemProps> =
   React.forwardRef<HTMLElement, ListGroupItemProps>(
     (
       {
         bsPrefix,
         active,
         disabled,
+        eventKey,
         className,
         variant,
         action,
         as,
-        onClick,
         ...props
       },
       ref,
     ) => {
       bsPrefix = useBootstrapPrefix(bsPrefix, 'list-group-item');
+      const [navItemProps, meta] = useNavItem({
+        key: makeEventKey(eventKey, props.href),
+        active,
+        ...props,
+      });
 
-      const handleClick = useCallback(
-        (event) => {
-          if (disabled) {
-            event.preventDefault();
-            event.stopPropagation();
-            return;
-          }
-
-          onClick?.(event);
-        },
-        [disabled, onClick],
-      );
+      const handleClick = useEventCallback((event) => {
+        if (disabled) {
+          event.preventDefault();
+          event.stopPropagation();
+          return;
+        }
+
+        navItemProps.onClick(event);
+      });
 
       if (disabled && props.tabIndex === undefined) {
         props.tabIndex = -1;
         props['aria-disabled'] = true;
       }
 
+      // eslint-disable-next-line no-nested-ternary
+      const Component = as || (action ? (props.href ? 'a' : 'button') : 'div');
+
       return (
-        <BaseNavItem
+        <Component
           ref={ref}
           {...props}
-          // eslint-disable-next-line no-nested-ternary
-          as={as || (action ? (props.href ? 'a' : 'button') : 'div')}
+          {...navItemProps}
           onClick={handleClick}
           className={classNames(
             className,
             bsPrefix,
-            active && 'active',
+            meta.isActive && 'active',
             disabled && 'disabled',
             variant && `${bsPrefix}-${variant}`,
             action && `${bsPrefix}-action`,
@@ -121,7 +121,6 @@ const ListGroupItem: BsPrefixRefForwardingComponent<'a', ListGroupItemProps> =
   );
 
 ListGroupItem.propTypes = propTypes;
-ListGroupItem.defaultProps = defaultProps;
 ListGroupItem.displayName = 'ListGroupItem';
 
 export default ListGroupItem;

test/ListGroupSpec.js

@@ -1,4 +1,5 @@
 import { mount } from 'enzyme';
+import { render } from '@testing-library/react';
 
 import ListGroup from '../src/ListGroup';
 
@@ -51,4 +52,16 @@ describe('<ListGroup>', () => {
   it('accepts as prop', () => {
     mount(<ListGroup as="ul" />).assertSingle('ul.list-group');
   });
+
+  it('should set active class on list item if activeKey set on parent', () => {
+    const { getByTestId } = render(
+      <ListGroup activeKey="1">
+        <ListGroup.Item eventKey="1" data-testid="list-item">
+          test
+        </ListGroup.Item>
+      </ListGroup>,
+    );
+
+    getByTestId('list-item').classList.contains('active').should.be.true;
+  });
 });