[FIX] web: prevent traceback for addButtonLoadingEffect in custo

Follow-up of [1] which changed code in stable in such a way it could
break when the function was used in a way it was not intended to in
some custom code. Note that the function could also be used by giving a
string selector to it, that will not work anymore: but instead of
crashing, this commit will just make it do nothing (it is only about
adding a button loading effect anyway).

[1]: https://github.com/odoo/odoo/commit/8bd51d060a48378652ae10c57a1949c3bb7d78de

closes odoo/odoo#160253

X-original-commit: d703125766d27ff33659c38fa50c2266f5f3dabb
Signed-off-by: Romain Derie (rde) <rde@odoo.com>
Signed-off-by: Quentin Smetz (qsm) <qsm@odoo.com>
This commit is contained in:
qsm-odoo
2024-04-02 21:35:21 +00:00
parent 9338ac0174
commit b95edd874c
@@ -91,7 +91,7 @@ export function makeButtonHandler(fct) {
const result = fct.apply(this, arguments);
const buttonEl = ev.target && ev.target.closest && ev.target.closest(BUTTON_HANDLER_SELECTOR);
if (!buttonEl) {
if (!(buttonEl instanceof HTMLElement)) {
return result;
}
@@ -99,14 +99,10 @@ export function makeButtonHandler(fct) {
// or at least for the duration of the click debounce. This makes
// a 'real' debounce creation useless. Also, during the debouncing
// part, the button is disabled without any visual effect.
if (buttonEl.classList) {
buttonEl.classList.add('pe-none');
}
buttonEl.classList.add('pe-none');
Promise.resolve(DEBOUNCE && new Promise(r => setTimeout(r, DEBOUNCE)))
.then(function () {
if (buttonEl.classList) {
buttonEl.classList.remove('pe-none');
}
buttonEl.classList.remove('pe-none');
const restore = addButtonLoadingEffect(buttonEl);
return Promise.resolve(result).finally(restore);
});
@@ -125,19 +121,18 @@ export function makeButtonHandler(fct) {
* initial state
*/
export function addButtonLoadingEffect(btnEl) {
if (!(btnEl instanceof HTMLElement)) {
return () => {};
}
// Note that pe-none is used alongside "disabled" so that the behavior is
// the same on links not using the "btn" class -> pointer-events disabled.
if (btnEl.classList) {
btnEl.classList.add('o_website_btn_loading', 'disabled', 'pe-none');
}
btnEl.classList.add('o_website_btn_loading', 'disabled', 'pe-none');
btnEl.disabled = true;
const loaderEl = document.createElement('span');
loaderEl.classList.add('fa', 'fa-refresh', 'fa-spin', 'me-2');
btnEl.prepend(loaderEl);
return () => {
if (btnEl.classList) {
btnEl.classList.remove('o_website_btn_loading', 'disabled', 'pe-none');
}
btnEl.classList.remove('o_website_btn_loading', 'disabled', 'pe-none');
btnEl.disabled = false;
loaderEl.remove();
};