From 450d84fa937ddf5049045ccf7231113165989cf3 Mon Sep 17 00:00:00 2001
From: Alexandre Fauquette <45398769+alexfauquette@users.noreply.github.com>
Date: Tue, 10 Sep 2024 12:29:49 +0200
Subject: [PATCH] [charts] Fix onAxisClick with layour='horizontal' (#14547)

---
 .../src/BarChart/checkClickEvent.test.tsx     | 53 +++++++++++++++++++
 .../ChartsOnAxisClickHandler.tsx              |  2 +-
 2 files changed, 54 insertions(+), 1 deletion(-)

diff --git a/packages/x-charts/src/BarChart/checkClickEvent.test.tsx b/packages/x-charts/src/BarChart/checkClickEvent.test.tsx
index 7804217e7402a..b485c1e43062d 100644
--- a/packages/x-charts/src/BarChart/checkClickEvent.test.tsx
+++ b/packages/x-charts/src/BarChart/checkClickEvent.test.tsx
@@ -80,6 +80,59 @@ describe('BarChart - click event', () => {
         seriesValues: { s1: 1, s2: 1 },
       });
     });
+
+    it('should provide the right context as second argument with layout="horizontal"', function test() {
+      if (isJSDOM) {
+        // can't do Pointer event with JSDom https://github.com/jsdom/jsdom/issues/2527
+        this.skip();
+      }
+      const onAxisClick = spy();
+      render(
+        <div
+          style={{
+            margin: -8, // Removes the body default margins
+            width: 400,
+            height: 400,
+          }}
+        >
+          <BarChart
+            {...config}
+            layout="horizontal"
+            series={[
+              { dataKey: 'v1', id: 's1' },
+              { dataKey: 'v2', id: 's2' },
+            ]}
+            yAxis={[{ scaleType: 'band', dataKey: 'x' }]}
+            onAxisClick={onAxisClick}
+          />
+        </div>,
+      );
+      const svg = document.querySelector<HTMLElement>('svg')!;
+
+      firePointerEvent(svg, 'pointermove', {
+        clientX: 60,
+        clientY: 198,
+      });
+      fireEvent.click(svg);
+
+      expect(onAxisClick.lastCall.args[1]).to.deep.equal({
+        dataIndex: 0,
+        axisValue: 'A',
+        seriesValues: { s1: 4, s2: 2 },
+      });
+
+      firePointerEvent(svg, 'pointermove', {
+        clientX: 60,
+        clientY: 201,
+      });
+      fireEvent.click(svg);
+
+      expect(onAxisClick.lastCall.args[1]).to.deep.equal({
+        dataIndex: 1,
+        axisValue: 'B',
+        seriesValues: { s1: 1, s2: 1 },
+      });
+    });
   });
 
   describe('onItemClick', () => {
diff --git a/packages/x-charts/src/ChartsOnAxisClickHandler/ChartsOnAxisClickHandler.tsx b/packages/x-charts/src/ChartsOnAxisClickHandler/ChartsOnAxisClickHandler.tsx
index 66dd4c1f68168..c53130c8c2365 100644
--- a/packages/x-charts/src/ChartsOnAxisClickHandler/ChartsOnAxisClickHandler.tsx
+++ b/packages/x-charts/src/ChartsOnAxisClickHandler/ChartsOnAxisClickHandler.tsx
@@ -38,7 +38,7 @@ function ChartsOnAxisClickHandler(props: ChartsOnAxisClickHandlerProps) {
     const handleMouseClick = (event: MouseEvent) => {
       event.preventDefault();
 
-      const isXaxis = (axis.x && axis.x.index) !== undefined;
+      const isXaxis = axis.x && axis.x.index !== -1;
       const USED_AXIS_ID = isXaxis ? xAxisIds[0] : yAxisIds[0];
       const dataIndex = isXaxis ? axis.x && axis.x.index : axis.y && axis.y.index;