Sửa lỗi "khó gõ" + Nguyên tắc bút-sửa toàn hệ thống (vòng 9)

Date: 2026-06-20 | Status: FIXED, verified browser.

Huyên báo

1. Ô gõ mô tả điều kiện phức tạp/trigger ở MOIT rất khó gõ.
2. Mọi nơi đã nhập thông tin cần bút ✎ sửa lại dễ dàng bất cứ lúc nào — rà toàn hệ thống; hiệu chỉnh là việc thường xuyên nên phải dễ nhất.

Nguyên nhân "khó gõ" (đã tìm ra)

Mỗi keystroke oninput gọi App.render() → render dựng lại toàn bộ ô nhập (innerHTML=''). Textarea đang gõ bị thay bằng node mới → mất focus sau mỗi ký tự. Lỗi kiến trúc render, có ở MOIT (ô mô tả) và cả MOUT (ô giá trị lọc).

Cách sửa (chuẩn — áp cho mọi builder)

Tách 2 pha:

• controls / dựng ô nhập (inpList, condList, complexBoxes, trigBoxes, colList, filtList): CHỈ chạy khi đổi cấu trúc (thêm/bớt/đổi chỗ/đổi trường).
• preview / view (form, bảng, gate, JSON): chạy mỗi keystroke — KHÔNG dựng lại ô nhập.
• Keystroke (textarea, ô giá trị, nhãn, tiêu đề) → cập nhật model + preview()/view() only.
• MOIT: App.preview(). MOUT: tách App.render()=controls+view; App.view()=chỉ vẽ bảng+json; ô giá trị lọc & tiêu đề dùng App.view().

Verified browser:

• MOIT: gõ 12 ký tự vào ô mô tả DOT → focus giữ nguyên cùng node, value="ABCDEFGHIJKL", JSON live. ✓
• MOUT: gõ "Aeon Mall" vào ô giá trị lọc → focus giữ, lọc live (8/8 dòng). ✓

Nguyên tắc bút-sửa — rà soát toàn hệ thống

Nơi	Trạng thái
Danh sách đã đúc (MOW/MOT/MOUT/Master)	✎ đầu mỗi dòng → về xưởng sửa ✓; drawer "✎ Sửa khuôn này" ✓
MOUT builder — tiêu đề	✎ ✓
MOUT builder — ô giá trị lọc	gõ mượt ✓ (đã sửa)
MOIT builder — tiêu đề	✎ ✓ (thêm)
MOIT builder — nhãn trường nhập	✎ + sửa inline (gõ thẳng) ✓ (thêm)
MOIT builder — ô mô tả/điều kiện	✎ focus + gõ mượt ✓ (sửa)
Mọi ô đã nhập trong builder	đều là input sống, sửa thẳng bất cứ lúc nào ✓

Còn lại (cho vòng sau)

• MOUT: nhãn cột (cột thêm từ catalog) chưa sửa inline — thêm ✎ như MOIT.
• MOW canvas / MOT studio (trang cũ, chưa rebuild): rà cùng nguyên tắc khi đụng tới.
• Quy ước chung: builder mới luôn theo mẫu controls/preview tách đôi để không tái lỗi.

Verified: moit-builder-v1 + mout-builder-v3 gõ mượt, focus giữ.