shadcn-ui / ui

Beautifully designed components that you can copy and paste into your apps. Accessible. Customizable. Open Source.
https://ui.shadcn.com
MIT License
73.22k stars 4.48k forks source link

[bug]: Wrong Bar Chart Tooltip For Horizontal Layout On Mobile #4584

Open MHBahrampour opened 2 months ago

MHBahrampour commented 2 months ago

Describe the bug

When tapping on any bar in the chart, the tooltip for the first bar always appears first, as shown in the video below.

https://github.com/user-attachments/assets/86a5a274-7dd5-4878-a9cd-55eb8e610d98

Affected component/components

Bar Chart

How to reproduce

  1. Open the bar chart page on the documentation site using a mobile device or Chrome's mobile simulator.
  2. Tap on any bar other than the first one in a horizontal bar chart.

Codesandbox/StackBlitz link

No response

Logs

No response

System Info

Windows and Android, Google Chrome

Before submitting

heecheon92 commented 2 months ago

I think I found the solution but don't really understand what's going on.

Adding "onClick={(e) => e.preventDefault()}" seems to fix the issue.

Look for "ChartTooltipContent". On the return statement div, applying the following changes seems to fix the behavior. (not the underlying issue tho)

      <div
        ref={ref}
        className={cn(
          "grid min-w-[8rem] items-start gap-1.5 rounded-lg border border-border/50 bg-background px-2.5 py-1.5 text-xs shadow-xl",
          className
        )}
        onClick={(e) => e.preventDefault()} // <-- This line fixes the behavior
      >
...
    </div>

Is anyone working on this?

MHBahrampour commented 2 months ago

@heecheon92 Thanks for the reply, unfortunately preventDefault didn't solve the issue for me. Please thumbs up the issue so they notice sooner.