refactor: replace lifecycle hooks with useEffect and improve state initialization in OrderDisplay to prevent patch conflicts

This commit is contained in:
Suherdy Yacob 2026-05-11 17:26:57 +07:00
parent c79145faa3
commit 43e908ce7d

View File

@ -2,20 +2,26 @@
import { OrderDisplay } from "@point_of_sale/app/components/order_display/order_display";
import { patch } from "@web/core/utils/patch";
import { useState, onMounted, onWillUnmount } from "@odoo/owl";
import { useState, useEffect } from "@odoo/owl";
patch(OrderDisplay.prototype, {
setup() {
super.setup();
// Use Object.assign to avoid overwriting state from other patches (e.g. pos_urban_piper)
if (this.state) {
Object.assign(this.state, { displayedCount: 20 });
} else {
this.state = useState({ displayedCount: 20 });
}
onMounted(() => {
const scrollable = this.scrollableRef.el;
// Use useEffect to handle dynamic mounting of the scrollable element
useEffect(
(scrollable) => {
if (!scrollable) {
return;
}
this.onScroll = () => {
const onScroll = () => {
if (
scrollable.scrollTop + scrollable.clientHeight >=
scrollable.scrollHeight - 100
@ -25,21 +31,18 @@ patch(OrderDisplay.prototype, {
}
}
};
scrollable.addEventListener("scroll", this.onScroll);
scrollable.addEventListener("scroll", onScroll);
// Ensure selected line is visible by expanding displayedCount if needed
const selectedLineIndex = this.comboSortedLines.findIndex(l => l.selected);
if (selectedLineIndex >= this.state.displayedCount) {
this.state.displayedCount = selectedLineIndex + 1;
}
});
onWillUnmount(() => {
const el = this.scrollableRef.el;
if (el) {
el.removeEventListener("scroll", this.onScroll);
}
});
return () => scrollable.removeEventListener("scroll", onScroll);
},
() => [this.scrollableRef?.el]
);
},
get linesToDisplay() {