From bd3a23b03dc1879052acc728653df6379e7df51d Mon Sep 17 00:00:00 2001
From: Ho Ngoc Hai <hongochai10@icloud.com>
Date: Thu, 26 Mar 2026 10:17:16 +0700
Subject: [PATCH] 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>
---
 .../WebClientTpos.Client/wwwroot/index.html   | 31 +++++++++++++++++++
 1 file changed, 31 insertions(+)

diff --git a/apps/web-client-tpos-net/src/WebClientTpos.Client/wwwroot/index.html b/apps/web-client-tpos-net/src/WebClientTpos.Client/wwwroot/index.html
index 7d1b8a01..4cf5546a 100644
--- a/apps/web-client-tpos-net/src/WebClientTpos.Client/wwwroot/index.html
+++ b/apps/web-client-tpos-net/src/WebClientTpos.Client/wwwroot/index.html
@@ -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>