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:
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user