fix(pos): add Lucide icon re-init observer for Blazor WASM compatibility

Lucide JS replaces <i data-lucide> elements with <svg>, breaking
Blazor WASM's DOM diffing algorithm (removeChild null error).
Added MutationObserver that safely re-initializes Lucide icons
after Blazor renders, and dismiss handler for error banner.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Ho Ngoc Hai
2026-03-26 10:17:16 +07:00
parent 6bdf0390ba
commit bd3a23b03d

View File

@@ -126,6 +126,37 @@
<!-- VI: JavaScript MudBlazor -->
<script src="/_content/MudBlazor/MudBlazor.min.js"></script>
<!-- EN: Suppress Blazor removeChild DOM mismatch caused by Lucide icon replacement.
Lucide replaces <i data-lucide> with <svg>, breaking Blazor's DOM diffing.
This observer re-initializes Lucide icons safely after Blazor renders. -->
<!-- VI: Khắc phục lỗi removeChild DOM mismatch do Lucide icon thay thế.
Lucide thay <i data-lucide> bằng <svg>, gây lỗi DOM diffing của Blazor.
Observer này re-init Lucide icons an toàn sau khi Blazor render. -->
<script>
(function() {
// Dismiss error banner on click
document.addEventListener('click', function(e) {
if (e.target.classList.contains('dismiss')) {
var ui = document.getElementById('blazor-error-ui');
if (ui) ui.style.display = 'none';
}
});
// Re-initialize Lucide icons periodically for Blazor WASM dynamic content
var _lucideTimer;
function initLucide() {
if (window.lucide && typeof lucide.createIcons === 'function') {
try { lucide.createIcons(); } catch(e) {}
}
}
// Run Lucide init after Blazor renders (MutationObserver)
var obs = new MutationObserver(function() {
clearTimeout(_lucideTimer);
_lucideTimer = setTimeout(initLucide, 100);
});
obs.observe(document.body, { childList: true, subtree: true });
})();
</script>
<!-- EN: POS helpers (receipt printing, etc.) -->
<!-- VI: Hàm hỗ trợ POS (in hóa đơn, v.v.) -->
<script src="/js/pos-helpers.js"></script>