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