update the event type to HTMLButtonElement

primer · Dec 5, 2023 · 47b6862 · 47b6862
1 parent 66c70d0
commit 47b6862
Show file tree

Hide file tree

Showing 3 changed files with 6 additions and 6 deletions.
diff --git a/src/ActionList/Item.tsx b/src/ActionList/Item.tsx
@@ -52,7 +52,7 @@ export const Item = React.forwardRef<HTMLLIElement, ActionListItemProps>(
 
     const onSelect = React.useCallback(
       (
-        event: React.MouseEvent<HTMLElement> | React.KeyboardEvent<HTMLElement>,
+        event: React.MouseEvent<HTMLButtonElement> | React.KeyboardEvent<HTMLButtonElement>,
         // eslint-disable-next-line @typescript-eslint/ban-types
         afterSelect?: Function,
       ) => {
@@ -182,15 +182,15 @@ export const Item = React.forwardRef<HTMLLIElement, ActionListItemProps>(
     }
 
     const clickHandler = React.useCallback(
-      (event: React.MouseEvent<HTMLElement>) => {
+      (event: React.MouseEvent<HTMLButtonElement>) => {
         if (disabled) return
         onSelect(event, afterSelect)
       },
       [onSelect, disabled, afterSelect],
     )
 
     const keyPressHandler = React.useCallback(
-      (event: React.KeyboardEvent<HTMLElement>) => {
+      (event: React.KeyboardEvent<HTMLButtonElement>) => {
         if (disabled) return
         if ([' ', 'Enter'].includes(event.key)) {
           onSelect(event, afterSelect)

diff --git a/src/ActionList/shared.ts b/src/ActionList/shared.ts
@@ -10,7 +10,7 @@ export type ActionListItemProps = {
   /**
    * Callback that will trigger both on click selection and keyboard selection.
    */
-  onSelect?: (event: React.MouseEvent<HTMLElement> | React.KeyboardEvent<HTMLElement>) => void
+  onSelect?: (event: React.MouseEvent<HTMLButtonElement> | React.KeyboardEvent<HTMLButtonElement>) => void
   /**
    * Is the `Item` is currently selected?
    */

diff --git a/src/SegmentedControl/SegmentedControl.tsx b/src/SegmentedControl/SegmentedControl.tsx
@@ -125,10 +125,10 @@ const Root: React.FC<React.PropsWithChildren<SegmentedControlProps>> = ({
                 <ActionList.Item
                   key={`segmented-control-action-btn-${index}`}
                   selected={index === selectedIndex}
-                  onSelect={(event: React.MouseEvent<HTMLElement> | React.KeyboardEvent<HTMLElement>) => {
+                  onSelect={(event: React.MouseEvent<HTMLButtonElement> | React.KeyboardEvent<HTMLButtonElement>) => {
                     isUncontrolled && setSelectedIndexInternalState(index)
                     onChange && onChange(index)
-                    child.props.onClick && child.props.onClick(event as React.MouseEvent<HTMLLIElement>)
+                    child.props.onClick && child.props.onClick(event as React.MouseEvent<HTMLButtonElement>)
                   }}
                 >
                   {ChildIcon && <ChildIcon />} {getChildText(child)}