Select: when calling onSelect with a keyboard event, pass in the event (#544)

Author: hoorayimhelping

Diff for: src/components/Select/MultiSelect.tsx

@@ -1,21 +1,21 @@
-import { useCallback, useState } from "react";
+import { KeyboardEvent, MouseEvent, useCallback, useState } from "react";
 
-import {useUpdateEffect} from "@/hooks";
+import { useUpdateEffect } from "@/hooks";
 
 import { SelectContainerProps, SelectOptionProp, SelectionType } from "./common/types";
-import {
-  SelectGroup,
-  SelectItem,
-  InternalSelect
-} from "./common/InternalSelect";
+import { SelectGroup, SelectItem, InternalSelect } from "./common/InternalSelect";
 
 export interface MultiSelectProps
   extends Omit<
     SelectContainerProps,
     "onChange" | "value" | "open" | "onOpenChange" | "onSelect"
   > {
   defaultValue?: Array<string>;
-  onSelect?: (value: Array<string>, type?: SelectionType) => void;
+  onSelect?: (
+    value: Array<string>,
+    type?: SelectionType,
+    evt?: KeyboardEvent<HTMLElement> | MouseEvent<HTMLElement>
+  ) => void;
   value?: Array<string>;
   defaultOpen?: boolean;
   onOpenChange?: (open: boolean) => void;
@@ -50,10 +50,10 @@ export const MultiSelect = ({
   }, [valueProp]);
 
   const onChange = useCallback(
-    (values: Array<string>, type?: SelectionType) => {
+    (values: Array<string>, type?: SelectionType, evt?: KeyboardEvent<HTMLElement>) => {
       setSelectedValues(values);
       if (typeof onSelectProp === "function") {
-        onSelectProp(values, type);
+        onSelectProp(values, type, evt);
       }
     },
     [onSelectProp]

Diff for: src/components/Select/SingleSelect.tsx

@@ -1,4 +1,4 @@
-import { useCallback, useState } from "react";
+import { KeyboardEvent, MouseEvent, useCallback, useState } from "react";
 
 import { useUpdateEffect } from "@/hooks";
 
@@ -11,7 +11,11 @@ export interface SelectProps
     "onChange" | "value" | "sortable" | "open" | "onOpenChange" | "onSelect"
   > {
   defaultValue?: string;
-  onSelect?: (value: string, type?: SelectionType) => void;
+  onSelect?: (
+    value: string,
+    type?: SelectionType,
+    evt?: KeyboardEvent<HTMLElement> | MouseEvent<HTMLElement>
+  ) => void;
   value?: string;
   placeholder?: string;
   onOpenChange?: (open: boolean) => void;
@@ -48,7 +52,11 @@ export const Select = ({
   );
 
   const onSelect = useCallback(
-    (value: string, type?: SelectionType) => {
+    (
+      value: string,
+      type?: SelectionType,
+      evt?: KeyboardEvent<HTMLElement> | MouseEvent<HTMLElement>
+    ) => {
       setSelectedValues(values => {
         if (values[0] !== value) {
           return [value];
@@ -57,7 +65,7 @@ export const Select = ({
       });
       onOpenChange(false);
       if (typeof onSelectProp === "function") {
-        onSelectProp(value, type);
+        onSelectProp(value, type, evt);
       }
     },
     [onSelectProp, onOpenChange]

Diff for: src/components/Select/common/InternalSelect.tsx

@@ -250,9 +250,9 @@ export const InternalSelect = ({
       if (e.key === "Enter") {
         e.preventDefault();
         if (highlighted) {
-          onSelect(highlighted);
+          onSelect(highlighted, undefined, e);
         } else if (visibleList.current.length === 0 && allowCreateOption) {
-          onSelect(search, "custom");
+          onSelect(search, "custom", e);
         }
       } else if (["ArrowUp", "ArrowDown", "Home", "End"].includes(e.key)) {
         e.preventDefault();
@@ -306,7 +306,7 @@ export const InternalSelect = ({
     e.preventDefault();
     e.stopPropagation();
     if (allowCreateOption) {
-      onSelect(search, "custom");
+      onSelect(search, "custom", e);
     }
   };
 
@@ -547,11 +547,11 @@ export const SelectItem = forwardRef<HTMLDivElement, SelectItemProps>(
   ) => {
     const { highlighted, updateHighlighted, isHidden, selectedValues, onSelect } =
       useOption();
-    const onSelectValue = () => {
+    const onSelectValue = (evt: MouseEvent<HTMLElement>) => {
       if (!disabled) {
-        onSelect(value);
+        onSelect(value, undefined, evt);
         if (typeof onSelectProp == "function") {
-          onSelectProp(value);
+          onSelectProp(value, undefined, evt);
         }
       }
     };
@@ -629,11 +629,11 @@ export const MultiSelectCheckboxItem = forwardRef<
   ) => {
     const { highlighted, updateHighlighted, isHidden, selectedValues, onSelect } =
       useOption();
-    const onSelectValue = () => {
+    const onSelectValue = (evt: MouseEvent<HTMLElement>) => {
       if (!disabled) {
-        onSelect(value);
+        onSelect(value, undefined, evt);
         if (typeof onSelectProp == "function") {
-          onSelectProp(value);
+          onSelectProp(value, undefined, evt);
         }
       }
     };

Diff for: src/components/Select/common/OptionContext.ts

@@ -1,12 +1,17 @@
-import { createContext } from "react";
+import { createContext, KeyboardEvent, MouseEvent } from "react";
+import { SelectionType } from "./types";
 
 type OptionContextProps = {
   search: string;
   highlighted?: string;
   updateHighlighted: (value: string) => void;
   isHidden: (value?: string) => boolean;
   selectedValues: Array<string>;
-  onSelect: (value: string) => void;
+  onSelect: (
+    value: string,
+    type?: SelectionType,
+    evt?: KeyboardEvent<HTMLElement> | MouseEvent<HTMLElement>
+  ) => void;
   showCheck?: boolean;
 };
 

Diff for: src/components/Select/common/types.ts

@@ -1,4 +1,4 @@
-import { HTMLAttributes, ReactNode } from "react";
+import { HTMLAttributes, KeyboardEvent, MouseEvent, ReactNode } from "react";
 import { HorizontalDirection, IconName } from "@/components";
 import { PopoverProps } from "@radix-ui/react-popover";
 
@@ -8,7 +8,11 @@ interface SelectItemComponentProps
   extends Omit<DivProps, "disabled" | "onSelect" | "value" | "children"> {
   separator?: boolean;
   disabled?: boolean;
-  onSelect?: (value: string) => void;
+  onSelect?: (
+    value: string,
+    type?: SelectionType,
+    evt?: KeyboardEvent<HTMLElement> | MouseEvent<HTMLElement>
+  ) => void;
   value: string;
   icon?: IconName;
   iconDir?: HorizontalDirection;
@@ -74,7 +78,11 @@ interface InternalSelectProps
   onOpenChange: (open: boolean) => void;
   value: Array<string>;
   sortable?: boolean;
-  onSelect: (value: string, type?: SelectionType) => void;
+  onSelect: (
+    value: string,
+    type?: SelectionType,
+    evt?: KeyboardEvent<HTMLElement> | MouseEvent<HTMLElement>
+  ) => void;
   multiple?: boolean;
   checkbox?: boolean;
   selectLabel?: string;