PR comments

Author: Katie George

src/internal/events/index.ts

@@ -2,6 +2,11 @@
 // SPDX-License-Identifier: Apache-2.0
 export type CancelableEventHandler<Detail = object> = (event: CustomEvent<Detail>) => void;
 
+// eslint-disable-next-line @typescript-eslint/ban-types
+export type NonCancelableEventHandler<Detail = {}> = (event: NonCancelableCustomEvent<Detail>) => void;
+
+export type NonCancelableCustomEvent<DetailType> = Omit<CustomEvent<DetailType>, "preventDefault">;
+
 export interface ClickDetail {
   button: number;
   ctrlKey: boolean;
@@ -49,3 +54,11 @@ export function fireCancelableEvent<T>(
   }
   return event.defaultPrevented;
 }
+
+export function fireNonCancelableEvent<T = null>(handler: NonCancelableEventHandler<T> | undefined, detail?: T) {
+  if (!handler) {
+    return;
+  }
+  const event = createCustomEvent({ cancelable: false, detail });
+  handler(event);
+}

src/support-prompt-group/focus-helpers.tsx

@@ -10,7 +10,15 @@ export function getNextFocusTarget(
     const buttons: HTMLButtonElement[] = Array.from(
       containerObjectRef?.current.querySelectorAll(`.${styles["support-prompt"]}`),
     );
-    return buttons.find((button) => button.dataset.itemid === focusedIdRef.current) ?? buttons[0] ?? null;
+
+    if (focusedIdRef.current) {
+      const buttonWithId = buttons.find((button) => button.dataset.itemid === focusedIdRef.current);
+      if (buttonWithId) {
+        return buttonWithId;
+      }
+    }
+
+    return buttons[0] ?? null;
   }
   return null;
 }

src/support-prompt-group/interfaces.ts

@@ -1,7 +1,7 @@
 // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 // SPDX-License-Identifier: Apache-2.0
 
-import { CancelableEventHandler, ClickDetail as _ClickDetail } from "../internal/events";
+import { ClickDetail as _ClickDetail, NonCancelableEventHandler } from "../internal/events";
 
 export interface SupportPromptGroupProps {
   /**
@@ -20,7 +20,7 @@ export interface SupportPromptGroupProps {
   /**
    * Called when the user clicks on a support prompt. The event detail object contains the ID of the clicked item.
    */
-  onItemClick: CancelableEventHandler<SupportPromptGroupProps.ItemClickDetail>;
+  onItemClick: NonCancelableEventHandler<SupportPromptGroupProps.ItemClickDetail>;
 
   /**
    * Adds an aria label to the support prompt group.

src/support-prompt-group/internal.tsx

@@ -15,7 +15,7 @@ import {
 
 import { getDataAttributes } from "../internal/base-component/get-data-attributes";
 import { InternalBaseComponentProps } from "../internal/base-component/use-base-component";
-import { fireCancelableEvent } from "../internal/events";
+import { fireNonCancelableEvent } from "../internal/events";
 import { useMergeRefs } from "../internal/utils/use-merge-refs";
 import { getNextFocusTarget, onUnregisterActive } from "./focus-helpers";
 import { SupportPromptGroupProps } from "./interfaces";
@@ -54,7 +54,7 @@ export const InternalSupportPromptGroup = forwardRef(
     const handleClick = (event: React.MouseEvent, id: string) => {
       const { altKey, button, ctrlKey, metaKey, shiftKey } = event;
 
-      fireCancelableEvent(onItemClick, { id, altKey, button, ctrlKey, metaKey, shiftKey }, event);
+      fireNonCancelableEvent(onItemClick, { id, altKey, button, ctrlKey, metaKey, shiftKey }, event);
     };
 
     useEffect(() => {