From 8c7012e77b5ca2abde0b8d30ca1ad38cf70cbdd0 Mon Sep 17 00:00:00 2001
From: tulup-conner <conner@tulup.io>
Date: Fri, 1 Jul 2022 21:24:18 +0000
Subject: [PATCH] fix(component): Remove `type="button"` when not a `<button>`
 (#217)

`ListGroup.Item`s currently have `type="button"` always,
even though they can be an anchor (`<a>`) element
instead. That's changed now.

Also adds `props` since they weren't being passed
in for some reason.
---
 src/lib/components/ListGroup/ListGroupItem.tsx | 18 ++++++++++--------
 1 file changed, 10 insertions(+), 8 deletions(-)

diff --git a/src/lib/components/ListGroup/ListGroupItem.tsx b/src/lib/components/ListGroup/ListGroupItem.tsx
index cd92e8f13..d43b7167f 100644
--- a/src/lib/components/ListGroup/ListGroupItem.tsx
+++ b/src/lib/components/ListGroup/ListGroupItem.tsx
@@ -1,5 +1,6 @@
 import classNames from 'classnames';
 import type { ComponentProps, FC, PropsWithChildren } from 'react';
+import { excludeClassName } from '../../helpers/exclude';
 import { useTheme } from '../Flowbite/ThemeContext';
 
 export interface ListGroupItemProps extends PropsWithChildren<Omit<ComponentProps<'a' | 'button'>, 'className'>> {
@@ -16,22 +17,23 @@ export const ListGroupItem: FC<ListGroupItemProps> = ({
   href,
   icon: Icon,
   onClick,
+  ...props
 }): JSX.Element => {
-  const theme = useTheme().theme.listGroup.item;
+  const isLink = typeof href !== 'undefined';
+
+  const Component = isLink ? 'a' : 'button';
+  const theirProps = excludeClassName(props);
 
-  const Component = typeof href === 'undefined' ? 'button' : 'a';
+  const theme = useTheme().theme.listGroup.item;
 
   return (
     <li>
       <Component
-        className={classNames(
-          theme.active[isActive ? 'on' : 'off'],
-          theme.base,
-          theme.href[typeof href === 'undefined' ? 'off' : 'on'],
-        )}
+        className={classNames(theme.active[isActive ? 'on' : 'off'], theme.base, theme.href[isLink ? 'on' : 'off'])}
         href={href}
         onClick={onClick}
-        type="button"
+        type={isLink ? undefined : 'button'}
+        {...theirProps}
       >
         {Icon && <Icon aria-hidden className={theme.icon} data-testid="flowbite-list-group-item-icon" />}
         {children}