diff --git a/addons/web/static/src/core/dropdown/dropdown.js b/addons/web/static/src/core/dropdown/dropdown.js index 19c212ba8a3..1dfcf1a2bf1 100644 --- a/addons/web/static/src/core/dropdown/dropdown.js +++ b/addons/web/static/src/core/dropdown/dropdown.js @@ -275,6 +275,11 @@ export class Dropdown extends Component { if (this.ui.activeElement !== this.myActiveEl) { return; } + + if (ev.target.closest(".bootstrap-datetimepicker-widget")) { + return; + } + // Close if we clicked outside the dropdown, or outside the parent // element if it is the toggler const rootEl = diff --git a/addons/web/static/tests/core/dropdown_tests.js b/addons/web/static/tests/core/dropdown_tests.js index 77b21b11920..8ccd579f9c6 100644 --- a/addons/web/static/tests/core/dropdown_tests.js +++ b/addons/web/static/tests/core/dropdown_tests.js @@ -1,6 +1,7 @@ /** @odoo-module **/ import { browser } from "@web/core/browser/browser"; +import { DateTimePicker } from "@web/core/datepicker/datepicker"; import { Dropdown } from "@web/core/dropdown/dropdown"; import { DropdownItem } from "@web/core/dropdown/dropdown_item"; import { hotkeyService } from "@web/core/hotkeys/hotkey_service"; @@ -1003,4 +1004,42 @@ QUnit.module("Components", ({ beforeEach }) => { assert.containsOnce(target, ".o-tooltip"); assert.strictEqual(target.querySelector(".o-tooltip").textContent, "My tooltip"); }); + + QUnit.test( + "Dropdown with a date picker inside do not close when a click occurs in date picker", + async (assert) => { + class MyComponent extends owl.Component {} + MyComponent.template = owl.xml` + + + Dropdown toggler + + + + `; + MyComponent.components = { Dropdown, DateTimePicker }; + + await makeParent(MyComponent); + + assert.containsNone(target, ".o-dropdown--menu"); + + await click(target, ".dropdown-toggle"); + + assert.containsOnce(target, ".o-dropdown--menu"); + assert.containsNone(document.body, ".bootstrap-datetimepicker-widget"); + assert.strictEqual(target.querySelector(".o_datepicker_input").value, ""); + + await click(target, ".o_datepicker_input"); + + assert.containsOnce(target, ".o-dropdown--menu"); + assert.containsOnce(document.body, ".bootstrap-datetimepicker-widget"); + assert.strictEqual(target.querySelector(".o_datepicker_input").value, ""); + + await click(document.querySelectorAll(".datepicker table td")[15]); // select some day + + assert.containsOnce(target, ".o-dropdown--menu"); + assert.containsOnce(document.body, ".bootstrap-datetimepicker-widget"); + assert.notOk(target.querySelector(".o_datepicker_input").value === ""); + } + ); });