From 74b53af0343126e293e4f33e403b443770c2feef Mon Sep 17 00:00:00 2001
From: Gabe Rodriguez <grod220@gmail.com>
Date: Tue, 22 Oct 2024 17:17:01 +0200
Subject: [PATCH] Fix asset selector onchange event (#1868)

* Fix asset selector onchange event

* restore keyboard navigation
---
 .changeset/proud-ducks-marry.md      |  5 +++++
 packages/ui/src/Dialog/RadioItem.tsx | 27 ++++++++++++---------------
 2 files changed, 17 insertions(+), 15 deletions(-)
 create mode 100644 .changeset/proud-ducks-marry.md

diff --git a/.changeset/proud-ducks-marry.md b/.changeset/proud-ducks-marry.md
new file mode 100644
index 000000000..2450a4a2e
--- /dev/null
+++ b/.changeset/proud-ducks-marry.md
@@ -0,0 +1,5 @@
+---
+'@penumbra-zone/ui': patch
+---
+
+Fix asset selector not firing onChange event
diff --git a/packages/ui/src/Dialog/RadioItem.tsx b/packages/ui/src/Dialog/RadioItem.tsx
index ace45ce46..85cec2658 100644
--- a/packages/ui/src/Dialog/RadioItem.tsx
+++ b/packages/ui/src/Dialog/RadioItem.tsx
@@ -1,4 +1,4 @@
-import { KeyboardEventHandler, MouseEventHandler, ReactNode, useMemo } from 'react';
+import React, { ReactNode, useMemo } from 'react';
 import { RadioGroupItem } from '@radix-ui/react-radio-group';
 import { styled } from 'styled-components';
 import { motion } from 'framer-motion';
@@ -97,22 +97,20 @@ export const RadioItem = ({
   onClose,
   onSelect,
 }: DialogRadioItemProps) => {
-  const onEnter: KeyboardEventHandler<HTMLButtonElement> = event => {
-    if (event.key === 'Enter') {
+  const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
+    // Is a click and not an arrow key up/down
+    if (event.detail > 0) {
+      onSelect?.();
       onClose?.();
     }
   };
 
-  const onMouseDown: MouseEventHandler<HTMLButtonElement> = () => {
-    // close only after the value is selected by onClick
-    setTimeout(() => {
+  const handleKeyDown = (event: React.KeyboardEvent<HTMLButtonElement>) => {
+    if (event.key === 'Enter' || event.key === ' ') {
+      event.preventDefault();
+      onSelect?.();
       onClose?.();
-    }, 0);
-  };
-
-  // click is triggered by radix-ui on focus, click, arrow selection, etc. – basically always
-  const onClick = () => {
-    onSelect?.();
+    }
   };
 
   const descriptionText = useMemo(() => {
@@ -135,9 +133,8 @@ export const RadioItem = ({
     <RadioGroupItem key={value} disabled={disabled} value={value} asChild>
       <Root
         {...asTransientProps({ actionType, disabled })}
-        onKeyDown={onEnter}
-        onMouseDown={onMouseDown}
-        onClick={onClick}
+        onClick={handleClick}
+        onKeyDown={handleKeyDown}
       >
         <Info>
           {startAdornment}