Fix ConfirmButton Enter/Space keydown bubbling to parent row handler
The button's onClick stopped mouse event propagation, but keyboard Enter/Space fired a separate keydown event that bubbled to the combatant row's onKeyDown, opening the stat block side panel instead of arming/confirming the button. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
@@ -67,6 +67,12 @@ export function ConfirmButton({
|
||||
};
|
||||
}, [isConfirming, revert]);
|
||||
|
||||
const handleKeyDown = useCallback((e: React.KeyboardEvent) => {
|
||||
if (e.key === "Enter" || e.key === " ") {
|
||||
e.stopPropagation();
|
||||
}
|
||||
}, []);
|
||||
|
||||
const handleClick = useCallback(
|
||||
(e: React.MouseEvent) => {
|
||||
e.stopPropagation();
|
||||
@@ -95,6 +101,7 @@ export function ConfirmButton({
|
||||
"bg-destructive text-primary-foreground rounded-md animate-confirm-pulse hover:bg-destructive hover:text-primary-foreground",
|
||||
)}
|
||||
onClick={handleClick}
|
||||
onKeyDown={handleKeyDown}
|
||||
onBlur={revert}
|
||||
disabled={disabled}
|
||||
aria-label={isConfirming ? `Confirm ${label.toLowerCase()}` : label}
|
||||
|
||||
Reference in New Issue
Block a user