diff --git a/packages/ui-select/src/Select/README.md b/packages/ui-select/src/Select/README.md
index 72f675b976..9ac1ef97f2 100644
--- a/packages/ui-select/src/Select/README.md
+++ b/packages/ui-select/src/Select/README.md
@@ -44,13 +44,15 @@ type: example
       setIsShowingOptions(true)
       if (inputValue || selectedOptionId || options.length === 0) return
 
-      switch (event.key) {
-        case 'ArrowDown':
-          return handleHighlightOption(event, { id: options[0].id })
-        case 'ArrowUp':
-          return handleHighlightOption(event, {
-            id: options[options.length - 1].id
-          })
+      if ('key' in event) {
+        switch (event.key) {
+          case 'ArrowDown':
+            return handleHighlightOption(event, { id: options[0].id })
+          case 'ArrowUp':
+            return handleHighlightOption(event, {
+              id: options[options.length - 1].id
+            })
+        }
       }
     }
 
@@ -234,13 +236,15 @@ type: example
       )
       if (inputValue || selectedOptionId || options.length === 0) return
 
-      switch (event.key) {
-        case 'ArrowDown':
-          return handleHighlightOption(event, { id: options[0].id })
-        case 'ArrowUp':
-          return handleHighlightOption(event, {
-            id: options[options.length - 1].id
-          })
+      if ('key' in event) {
+        switch (event.key) {
+          case 'ArrowDown':
+            return handleHighlightOption(event, { id: options[0].id })
+          case 'ArrowUp':
+            return handleHighlightOption(event, {
+              id: options[options.length - 1].id
+            })
+        }
       }
     }
 
@@ -436,21 +440,23 @@ type: example
 
       if (inputValue || options.length === 0) return
 
-      switch (event.key) {
-        case 'ArrowDown':
-          return handleHighlightOption(event, {
-            id: options.find((option) => !selectedOptionId.includes(option.id))
-              .id
-          })
-        case 'ArrowUp':
-          // Highlight last non-selected option
-          return handleHighlightOption(event, {
-            id: options[
-              options.findLastIndex(
-                (option) => !selectedOptionId.includes(option.id)
-              )
-            ].id
-          })
+      if ('key' in event) {
+        switch (event.key) {
+          case 'ArrowDown':
+            return handleHighlightOption(event, {
+              id: options.find((option) => !selectedOptionId.includes(option.id))
+                .id
+            })
+          case 'ArrowUp':
+            // Highlight last non-selected option
+            return handleHighlightOption(event, {
+              id: options[
+                options.findLastIndex(
+                  (option) => !selectedOptionId.includes(option.id)
+                )
+              ].id
+            })
+        }
       }
     }
 
@@ -489,13 +495,13 @@ type: example
       const newOptions = filterOptions(value)
       setInputValue(value)
       setFilteredOptions(newOptions)
-      sethHighlightedOptionId(newOptions.length > 0 ? newOptions[0].id : null)
+      setHighlightedOptionId(newOptions.length > 0 ? newOptions[0].id : null)
       setIsShowingOptions(true)
       setAnnouncement(getOptionsChangedMessage(newOptions))
     }
 
     const handleKeyDown = (event) => {
-      if (event.keyCode === 8) {
+      if ('keyCode' in event && event.keyCode === 8) {
         // when backspace key is pressed
         if (inputValue === '' && selectedOptionId.length > 0) {
           // remove last selected option, if input has no entered text
@@ -660,17 +666,19 @@ const GroupSelectExample = ({ options }) => {
   const handleShowOptions = (event) => {
     setIsShowingOptions(true)
     setHighlightedOptionId(null)
-    if (inputValue || selectedOptionId || options.length === 0) return
+    if (inputValue || selectedOptionId || Object.keys(options).length === 0) return
 
-    switch (event.key) {
-      case 'ArrowDown':
-        return handleHighlightOption(event, {
-          id: options[Object.keys(options)[0]][0].id
-        })
-      case 'ArrowUp':
-        return handleHighlightOption(event, {
-          id: Object.values(options).at(-1)?.at(-1)?.id
-        })
+    if ('key' in event) {
+      switch (event.key) {
+        case 'ArrowDown':
+          return handleHighlightOption(event, {
+            id: options[Object.keys(options)[0]][0].id
+          })
+        case 'ArrowUp':
+          return handleHighlightOption(event, {
+            id: Object.values(options).at(-1)?.at(-1)?.id
+          })
+      }
     }
   }
 
@@ -840,17 +848,19 @@ const GroupSelectAutocompleteExample = ({ options }) => {
     setIsShowingOptions(true)
     setHighlightedOptionId(null)
 
-    if (inputValue || selectedOptionId || options.length === 0) return
+    if (inputValue || selectedOptionId || Object.keys(options).length === 0) return
 
-    switch (event.key) {
-      case 'ArrowDown':
-        return handleHighlightOption(event, {
-          id: options[Object.keys(options)[0]][0].id
-        })
-      case 'ArrowUp':
-        return handleHighlightOption(event, {
-          id: Object.values(options).at(-1)?.at(-1)?.id
-        })
+    if ('key' in event) {
+      switch (event.key) {
+        case 'ArrowDown':
+          return handleHighlightOption(event, {
+            id: options[Object.keys(options)[0]][0].id
+          })
+        case 'ArrowUp':
+          return handleHighlightOption(event, {
+            id: Object.values(options).at(-1)?.at(-1)?.id
+          })
+      }
     }
   }
 
@@ -1205,13 +1215,15 @@ const SingleSelectExample = ({ options }) => {
 
     if (inputValue || selectedOptionId || options.length === 0) return
 
-    switch (event.key) {
-      case 'ArrowDown':
-        return handleHighlightOption(event, { id: options[0].id })
-      case 'ArrowUp':
-        return handleHighlightOption(event, {
-          id: options[options.length - 1].id
-        })
+    if ('key' in event) {
+      switch (event.key) {
+        case 'ArrowDown':
+          return handleHighlightOption(event, { id: options[0].id })
+        case 'ArrowUp':
+          return handleHighlightOption(event, {
+            id: options[options.length - 1].id
+          })
+      }
     }
   }
 
diff --git a/packages/ui-select/src/Select/index.tsx b/packages/ui-select/src/Select/index.tsx
index 42c8dd4b48..1e2ac662b1 100644
--- a/packages/ui-select/src/Select/index.tsx
+++ b/packages/ui-select/src/Select/index.tsx
@@ -308,7 +308,7 @@ class Select extends Component<SelectProps> {
     }
   }
 
-  highlightOption(event: React.SyntheticEvent, id: string) {
+  highlightOption(event: React.KeyboardEvent | React.MouseEvent, id: string) {
     const { onRequestHighlightOption } = this.props
     if (id) {
       onRequestHighlightOption?.(event, { id })
diff --git a/packages/ui-select/src/Select/props.ts b/packages/ui-select/src/Select/props.ts
index 3678ad3114..92304fe99f 100644
--- a/packages/ui-select/src/Select/props.ts
+++ b/packages/ui-select/src/Select/props.ts
@@ -142,18 +142,20 @@ type PropsFromSelectable = {
   /**
    * Callback fired requesting that the options list be shown.
    */
-  onRequestShowOptions?: (event: React.SyntheticEvent) => void
+  onRequestShowOptions?: (event: React.KeyboardEvent | React.MouseEvent) => void
 
   /**
    * Callback fired requesting that the options list be hidden.
    */
-  onRequestHideOptions?: (event: React.SyntheticEvent) => void
+  onRequestHideOptions?: (
+    event: React.KeyboardEvent | React.MouseEvent | React.FocusEvent
+  ) => void
 
   /**
    * Callback fired requesting a particular option be highlighted.
    */
   onRequestHighlightOption?: (
-    event: React.SyntheticEvent,
+    event: React.KeyboardEvent | React.MouseEvent,
     data: { id?: string; direction?: 1 | -1 }
   ) => void
 
@@ -161,7 +163,7 @@ type PropsFromSelectable = {
    * Callback fired requesting a particular option be selected.
    */
   onRequestSelectOption?: (
-    event: React.SyntheticEvent,
+    event: React.KeyboardEvent | React.MouseEvent,
     data: { id?: string }
   ) => void
 }
diff --git a/packages/ui-selectable/src/Selectable/props.ts b/packages/ui-selectable/src/Selectable/props.ts
index eb78b784ae..274c509218 100644
--- a/packages/ui-selectable/src/Selectable/props.ts
+++ b/packages/ui-selectable/src/Selectable/props.ts
@@ -49,37 +49,39 @@ type SelectableOwnProps = {
   /**
    * Callback fired when the options want to become visible
    */
-  onRequestShowOptions?: (event: React.SyntheticEvent) => void
+  onRequestShowOptions?: (event: React.KeyboardEvent | React.MouseEvent) => void
 
   /**
    * Callback fired when the options no longer want to be visible
    */
-  onRequestHideOptions?: (event: React.SyntheticEvent) => void
+  onRequestHideOptions?: (
+    event: React.KeyboardEvent | React.MouseEvent | React.FocusEvent
+  ) => void
 
   /**
    * Callback fired when option is hovered or highlighted via keyboard.
    * Either the `id` or the `direction` parameter is supplied
    */
   onRequestHighlightOption?: (
-    event: React.SyntheticEvent,
+    event: React.KeyboardEvent | React.MouseEvent,
     data: { id?: string; direction?: 1 | -1 }
   ) => void
 
   /**
-   * Callback fired when first option should be highlighted
+   * Callback fired when first option should be highlighted (triggered by the Home key)
    */
-  onRequestHighlightFirstOption?: (event: React.SyntheticEvent) => void
+  onRequestHighlightFirstOption?: (event: React.KeyboardEvent) => void
 
   /**
-   * Callback fired when last option should be highlighted
+   * Callback fired when last option should be highlighted (triggered by the End key)
    */
-  onRequestHighlightLastOption?: (event: React.SyntheticEvent) => void
+  onRequestHighlightLastOption?: (event: React.KeyboardEvent) => void
 
   /**
    * Callback fired when option clicked or selected via keyboard
    */
   onRequestSelectOption?: (
-    event: React.SyntheticEvent,
+    event: React.KeyboardEvent | React.MouseEvent,
     data: { id?: string }
   ) => void