[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: #2300

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({

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() {

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,

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"]],