DRY - PeopleSearch onKeyDown: handleEnterKey

src/components/Attendees/AttendeeSearch.tsx

@@ -1,6 +1,10 @@
 import { useEffect, useState } from "react";
 import { userAttendee } from "../../features/User/userDataTypes";
-import { PeopleSearch, User, ExtendedAutocompleteRenderInputParams } from "./PeopleSearch";
+import {
+  PeopleSearch,
+  User,
+  ExtendedAutocompleteRenderInputParams,
+} from "./PeopleSearch";
 
 export default function UserSearch({
   attendees,
@@ -11,7 +15,9 @@ export default function UserSearch({
   attendees: userAttendee[];
   setAttendees: Function;
   disabled?: boolean;
-  inputSlot?: (params: ExtendedAutocompleteRenderInputParams) => React.ReactNode;
+  inputSlot?: (
+    params: ExtendedAutocompleteRenderInputParams
+  ) => React.ReactNode;
 }) {
   const [selectedUsers, setSelectedUsers] = useState(
     attendees.map((a) => ({

src/components/Attendees/PeopleSearch.tsx

@@ -191,17 +191,19 @@ export function PeopleSearch({
           const { InputProps, ...enhancedParams } =
             enhancedParamsWithInputProps;
 
+          const handleEnterKey = (e: React.KeyboardEvent<HTMLInputElement>) => {
+            if (e.key === "Enter" && onToggleEventPreview) {
+              e.preventDefault();
+              onToggleEventPreview();
+            }
+          };
+
           const defaultTextFieldProps = {
             error: !!inputError,
             helperText: inputError,
             placeholder: searchPlaceholder,
             label: "",
-            onKeyDown: (e: React.KeyboardEvent<HTMLInputElement>) => {
+            onKeyDown: handleEnterKey,
-              if (e.key === "Enter" && onToggleEventPreview) {
-                e.preventDefault();
-                onToggleEventPreview();
-              }
-            },
             slotProps: {
               input: {
                 ...inputProps,
@@ -221,12 +223,7 @@ export function PeopleSearch({
                   helperText: inputError,
                   placeholder: searchPlaceholder,
                   label: "",
-                  onKeyDown: (e: React.KeyboardEvent<HTMLInputElement>) => {
+                  onKeyDown: handleEnterKey,
-                    if (e.key === "Enter" && onToggleEventPreview) {
-                      e.preventDefault();
-                      onToggleEventPreview();
-                    }
-                  },
                 })}
               </>
             );