[FIX] web: repair some keynav in dropdowns
ENCOUNTERED ISSUE: Unable to close a dropdown with ESC when the focus has been given to a select element inside the dropdown. TO REPRODUCE: i.e. in the searchpanel, go to "FilterMenu > Add Custom Filter" and open the field select element. Press ESC once: the field select element closes just fine. Press ESC a 2nd time: we expect the dropdown to close but nothing occur. REASON EXPLANATION: Since 84715436d our Dropdown component uses the 'dropdown-menu' bootstrap class. But under some conditions bootstrap stops the keydown events propagation when the event.target matches the query selector '.dropdown-menu'. IMPLEMENTED FIX: This commit refines this selector directly inside the bootstrap library. This is admittedly a bad practice but: - this modification is trivial and sensible - the modified selector is only used locally in the bootstrap's 'dropdown.js' file - the added test should prevent the lost of this customization in the future task-2764821 Part-of: odoo/odoo#84969
This commit is contained in:
@@ -111,7 +111,7 @@
|
|||||||
var Selector = {
|
var Selector = {
|
||||||
DATA_TOGGLE: '[data-toggle="dropdown"]',
|
DATA_TOGGLE: '[data-toggle="dropdown"]',
|
||||||
FORM_CHILD: '.dropdown form',
|
FORM_CHILD: '.dropdown form',
|
||||||
MENU: '.dropdown-menu',
|
MENU: '.dropdown-menu:not(.o-dropdown--menu)', // Odoo fix task-2764821
|
||||||
NAVBAR_NAV: '.navbar-nav',
|
NAVBAR_NAV: '.navbar-nav',
|
||||||
VISIBLE_ITEMS: '.dropdown-menu .dropdown-item:not(.disabled):not(:disabled)'
|
VISIBLE_ITEMS: '.dropdown-menu .dropdown-item:not(.disabled):not(:disabled)'
|
||||||
};
|
};
|
||||||
|
|||||||
@@ -665,6 +665,37 @@ QUnit.module("Components", ({ beforeEach }) => {
|
|||||||
assert.verifySteps(["1", "2"], "items should have been selected in this order");
|
assert.verifySteps(["1", "2"], "items should have been selected in this order");
|
||||||
});
|
});
|
||||||
|
|
||||||
|
QUnit.test("dropdowns keynav is not impacted by bootstrap", async (assert) => {
|
||||||
|
class Parent extends Component {}
|
||||||
|
Parent.components = { Dropdown };
|
||||||
|
Parent.template = xml`
|
||||||
|
<Dropdown startOpen="true">
|
||||||
|
<select><option>foo</option></select>
|
||||||
|
</Dropdown>
|
||||||
|
`;
|
||||||
|
env = await makeTestEnv();
|
||||||
|
await mount(Parent, target, { env });
|
||||||
|
assert.containsOnce(target, ".dropdown-menu", "menu is opened at start");
|
||||||
|
const menu = target.querySelector(".dropdown-menu");
|
||||||
|
|
||||||
|
// This class presence makes bootstrap ignore the below event
|
||||||
|
assert.hasClass(menu, "o-dropdown--menu");
|
||||||
|
|
||||||
|
const select = menu.querySelector("select");
|
||||||
|
const ev = new KeyboardEvent("keydown", {
|
||||||
|
bubbles: true,
|
||||||
|
// Define the ESC key with standard API (for hotkey_service)
|
||||||
|
key: "Escape",
|
||||||
|
code: "Escape",
|
||||||
|
// Define the ESC key with deprecated API (for bootstrap)
|
||||||
|
keyCode: 27,
|
||||||
|
which: 27,
|
||||||
|
});
|
||||||
|
select.dispatchEvent(ev);
|
||||||
|
await nextTick();
|
||||||
|
assert.containsNone(target, ".dropdown-menu", "menu is now closed");
|
||||||
|
});
|
||||||
|
|
||||||
QUnit.test("props toggler='parent'", async (assert) => {
|
QUnit.test("props toggler='parent'", async (assert) => {
|
||||||
class Parent extends Component {}
|
class Parent extends Component {}
|
||||||
Parent.template = xml`
|
Parent.template = xml`
|
||||||
|
|||||||
Reference in New Issue
Block a user