From eeffa885fa878af6c16451b8533c7ba9caeb01f4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?R=C3=A9mi=20Rahir=20=28rar=29?= <rar@odoo.com>
Date: Thu, 9 Mar 2023 08:37:59 +0000
Subject: [PATCH] [FIX] Chart panels: close color picker when clicking outside
 of it

The color picker would not close when the user would click outside of it
for the design panels of gauge and scorecard charts. The duplication of
design panles is probably to blame here.

Part-of: odoo/o-spreadsheet#2300
---
 .../gauge_chart_design_panel.ts               | 10 ++++++-
 .../chart/line_bar_pie_panel/design_panel.ts  |  2 +-
 .../scorecard_chart_design_panel.ts           | 10 ++++++-
 tests/components/charts.test.ts               | 26 +++++++++++++++++++
 4 files changed, 45 insertions(+), 3 deletions(-)

diff --git a/src/components/side_panel/chart/gauge_chart_panel/gauge_chart_design_panel.ts b/src/components/side_panel/chart/gauge_chart_panel/gauge_chart_design_panel.ts
index 5fe4c5edec..067055c507 100644
--- a/src/components/side_panel/chart/gauge_chart_panel/gauge_chart_design_panel.ts
+++ b/src/components/side_panel/chart/gauge_chart_panel/gauge_chart_design_panel.ts
@@ -1,4 +1,4 @@
-import { Component, useState } from "@odoo/owl";
+import { Component, useExternalListener, useState } from "@odoo/owl";
 import { deepCopy } from "../../../../helpers/index";
 import { GaugeChartDefinition, SectionRule } from "../../../../types/chart/gauge_chart";
 import {
@@ -87,6 +87,14 @@ export class GaugeChartDesignPanel extends Component<Props, SpreadsheetChildEnv>
     );
   }
 
+  onClick(ev: MouseEvent) {
+    this.state.openedMenu = undefined;
+  }
+
+  setup() {
+    useExternalListener(window, "click", this.onClick);
+  }
+
   updateBackgroundColor(color: Color) {
     this.state.openedMenu = undefined;
     this.props.updateChart({
diff --git a/src/components/side_panel/chart/line_bar_pie_panel/design_panel.ts b/src/components/side_panel/chart/line_bar_pie_panel/design_panel.ts
index b7ed6b19d9..46815dea26 100644
--- a/src/components/side_panel/chart/line_bar_pie_panel/design_panel.ts
+++ b/src/components/side_panel/chart/line_bar_pie_panel/design_panel.ts
@@ -30,7 +30,7 @@ export class LineBarPieDesignPanel extends Component<Props, SpreadsheetChildEnv>
   }
 
   setup() {
-    useExternalListener(window as any, "click", this.onClick);
+    useExternalListener(window, "click", this.onClick);
   }
 
   toggleColorPicker() {
diff --git a/src/components/side_panel/chart/scorecard_chart_panel/scorecard_chart_design_panel.ts b/src/components/side_panel/chart/scorecard_chart_panel/scorecard_chart_design_panel.ts
index 76083c4a09..b81f048fb3 100644
--- a/src/components/side_panel/chart/scorecard_chart_panel/scorecard_chart_design_panel.ts
+++ b/src/components/side_panel/chart/scorecard_chart_panel/scorecard_chart_design_panel.ts
@@ -1,4 +1,4 @@
-import { Component, useState } from "@odoo/owl";
+import { Component, useExternalListener, useState } from "@odoo/owl";
 import { ScorecardChartDefinition } from "../../../../types/chart/scorecard_chart";
 import { Color, DispatchResult, SpreadsheetChildEnv, UID } from "../../../../types/index";
 import { ColorPicker } from "../../../color_picker/color_picker";
@@ -23,6 +23,14 @@ export class ScorecardChartDesignPanel extends Component<Props, SpreadsheetChild
     openedColorPicker: undefined,
   });
 
+  onClick(ev: MouseEvent) {
+    this.state.openedColorPicker = undefined;
+  }
+
+  setup() {
+    useExternalListener(window, "click", this.onClick);
+  }
+
   updateTitle(ev) {
     this.props.updateChart({
       title: ev.target.value,
diff --git a/tests/components/charts.test.ts b/tests/components/charts.test.ts
index 3851410e44..66a034c387 100644
--- a/tests/components/charts.test.ts
+++ b/tests/components/charts.test.ts
@@ -320,6 +320,32 @@ describe("figures", () => {
     }
   );
 
+  test.each(["basicChart", "scorecard", "gauge"])(
+    "Clicking in the design panel closes the color picker",
+    async (chartType: string) => {
+      createTestChart(chartType);
+      await nextTick();
+
+      await simulateClick(".o-figure");
+      await simulateClick(".o-figure-menu-item");
+      const editButton = fixture.querySelector(".o-menu div[data-name='edit']")!;
+      expect(editButton.textContent).toBe("Edit");
+      await simulateClick(".o-menu div[data-name='edit']");
+      await nextTick();
+      await simulateClick(".o-panel-element.inactive");
+      await nextTick();
+      const designPanelBody = fixture.querySelector(".o-sidePanel .o-sidePanelBody .o-chart");
+      expect(designPanelBody).toBeTruthy();
+      const colorpickerButton = fixture.querySelector(".o-with-color-picker span");
+      await simulateClick(colorpickerButton);
+      await nextTick();
+      expect(fixture.querySelectorAll(".o-color-picker-line-item").length).not.toBe(0);
+
+      await simulateClick(designPanelBody);
+      expect(fixture.querySelectorAll(".o-color-picker-line-item").length).toBe(0);
+    }
+  );
+
   test.each([
     ["basicChart", [".o-data-labels"], ["labelRange"]],
     ["scorecard", [".o-data-labels"], ["baseline"]],