mirror of
https://github.com/odoo/owl.git
synced 2025-10-06 19:59:41 +07:00
[FIX] extensions: guarantee to call transitionend callback
There is a possibility that the transitionend event of an element/component with t-transition directive won't trigger. Though this situation is difficult to assert, it was observe in odoo runbot for the pos ui. When the transitionend event is not fired, the callback that removes the element from the dom won't be called, resulting to a corrupted view. An example of which is the following: ```html <div t-if="show" t-transition="fade">Hello</div> ``` If `show` is set to false by some ui action and by any chance the transitionend event is not fired (perhaps because the transition didn't actually start or because of completely unknown reason), the div element will remain in the view -- and this is not desirable. This commit patches this situation such that if after 50ms that the transitionend event is supposed to be fired but the event isn't fired, we force the callback using a setTimeout. This guarantees the call of the callback that is suppose to remove the element from the view.
This commit is contained in:
committed by
aab-odoo
parent
f0b75b6890
commit
88fd1cf483
@@ -2,6 +2,7 @@ import { STATUS } from "../component/component";
|
||||
import { VNode } from "../vdom/index";
|
||||
import { INTERP_REGEXP } from "./compilation_context";
|
||||
import { QWeb } from "./qweb";
|
||||
import { browser } from "../browser";
|
||||
|
||||
/**
|
||||
* Owl QWeb Extensions
|
||||
@@ -198,7 +199,14 @@ function whenTransitionEnd(elm: HTMLElement, cb) {
|
||||
const durations: Array<string> = (styles.transitionDuration || "").split(", ");
|
||||
const timeout: number = getTimeout(delays, durations);
|
||||
if (timeout > 0) {
|
||||
elm.addEventListener("transitionend", cb, { once: true });
|
||||
const transitionEndCB = () => {
|
||||
if (!elm.parentNode) return;
|
||||
cb();
|
||||
browser.clearTimeout(fallbackTimeout);
|
||||
elm.removeEventListener("transitionend", transitionEndCB);
|
||||
};
|
||||
elm.addEventListener("transitionend", transitionEndCB, { once: true });
|
||||
const fallbackTimeout = browser.setTimeout(transitionEndCB, timeout + 1);
|
||||
} else {
|
||||
cb();
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user