[FIX] web: popover clickAway don't preventDefault by default

Since commit 3d218e1, clicking outside
a popover closes the popover and performs a preventDefault on the event.
As a consequence, changes made in the property definition popover are no
longer applied when the popover is closed by clicking outside.

Problem:
The preventDefault has the consequence of cancelling the input change
event allowing the change to be applied to the property definition when
the popover is closed.

Solution:
Remove the preventDefault by default and only use it in the case of the
calendar view, which is the only use case that wants to prevent the click
event so as not to open a record creation dialog (see commit 3d218e1).

How to reproduce the PropertyField bug:
- Go to a form view with a properties field
- Click on the edit property button
- A popover opens so that you can edit the field definition
- Type a few characters in the label input
- Click outside the popover

Before this commit:
    The value inserted in the popover is ignored

After this commit:
    The value inserted in the popover is applied to the property.

It is not possible to write a test reproducing this native browser behaviour.

closes odoo/odoo#142842

Signed-off-by: Michaël Mattiello (mcm) <mcm@odoo.com>
This commit is contained in:
FrancoisGe
2023-11-21 22:00:07 +00:00
parent 430f4904ed
commit d71d52d16b
3 changed files with 3 additions and 26 deletions
@@ -56,7 +56,6 @@ export class PopoverController extends Component {
const target = ev.composedPath()[0];
if (this.props.closeOnClickAway(target) && !this.isInside(target)) {
this.props.close();
ev.preventDefault();
}
}
@@ -8,7 +8,7 @@ import { Field } from "@web/views/fields/field";
import { Record } from "@web/model/record";
import { getFormattedDateSpan } from "@web/views/calendar/utils";
import { Component } from "@odoo/owl";
import { Component, useExternalListener } from "@odoo/owl";
export class CalendarCommonPopover extends Component {
setup() {
@@ -17,6 +17,8 @@ export class CalendarCommonPopover extends Component {
this.date = null;
this.dateDuration = null;
useExternalListener(window, "pointerdown", (e) => e.preventDefault(), { capture: true });
this.computeDateTimeAndDuration();
}
@@ -85,30 +85,6 @@ QUnit.test("close on click away", async (assert) => {
assert.containsNone(fixture, ".o_popover #comp");
});
QUnit.test("close on click away should be default prevented", async (assert) => {
assert.expect(6);
class Comp extends Component {}
Comp.template = xml`<div id="comp">in popover</div>`;
popovers.add(popoverTarget, Comp, {});
await nextTick();
assert.containsOnce(fixture, ".o_popover");
assert.containsOnce(fixture, ".o_popover #comp");
const closeButton = fixture.querySelector("#close");
function clickListener(ev) {
assert.step(`click-event-${ev.defaultPrevented ? "default-prevented" : ""}`);
}
closeButton.addEventListener("pointerdown", clickListener);
await click(fixture, "#close");
assert.containsNone(fixture, ".o_popover");
assert.containsNone(fixture, ".o_popover #comp");
assert.verifySteps(["click-event-default-prevented"]);
closeButton.removeEventListener("pointerdown", clickListener);
});
QUnit.test("close on 'Escape' keydown", async (assert) => {
class Comp extends Component {}
Comp.template = xml`<div id="comp">in popover</div>`;