fix: prevent form submit on tooltip click, ref #5258

leather-io · Apr 19, 2024 · 64bb8c2 · 64bb8c2
1 parent 06aef60
commit 64bb8c2
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 3 deletions.
diff --git a/src/app/ui/components/containers/footers/available-balance.tsx b/src/app/ui/components/containers/footers/available-balance.tsx
@@ -18,7 +18,11 @@ export function AvailableBalance({
         <styled.span color="ink.text-subdued" textStyle="caption.01">
           Available balance
         </styled.span>
-        <BasicTooltip label={balanceTooltipLabel} side="top">
+        <BasicTooltip
+          label={balanceTooltipLabel}
+          side="top"
+          onClickTrigger={e => e.preventDefault()}
+        >
           <Box>
             <InfoCircleIcon color="ink.text-subdued" variant="small" />
           </Box>

diff --git a/src/app/ui/components/tooltip/basic-tooltip.tsx b/src/app/ui/components/tooltip/basic-tooltip.tsx
@@ -10,12 +10,23 @@ interface BasicTooltipProps {
   disabled?: boolean;
   side?: RadixTooltip.TooltipContentProps['side'];
   asChild?: boolean;
+  onClickTrigger?(e: React.MouseEvent<HTMLElement>): void;
 }
-export function BasicTooltip({ children, label, disabled, side, asChild }: BasicTooltipProps) {
+
+export function BasicTooltip({
+  children,
+  label,
+  disabled,
+  side,
+  asChild,
+  onClickTrigger,
+}: BasicTooltipProps) {
   const isDisabled = !label || disabled;
   return (
     <Tooltip.Root>
-      <Tooltip.Trigger asChild={asChild}>{children}</Tooltip.Trigger>
+      <Tooltip.Trigger asChild={asChild} onClick={onClickTrigger}>
+        {children}
+      </Tooltip.Trigger>
       <Tooltip.Portal>
         <Tooltip.Content hidden={isDisabled} side={side} sideOffset={5}>
           {label}