From 158cbde63a40d2a74b839e820b911ec8539c047a Mon Sep 17 00:00:00 2001
From: alexanderroese <github@roese.dev>
Date: Thu, 25 Jul 2024 22:21:21 +0200
Subject: [PATCH] add message for emojis not supported on this type

---
 snippets/shx-3d-render-input.liquid | 18 +++++++++++++++---
 1 file changed, 15 insertions(+), 3 deletions(-)

diff --git a/snippets/shx-3d-render-input.liquid b/snippets/shx-3d-render-input.liquid
index 3e6b2c1..4f4f130 100644
--- a/snippets/shx-3d-render-input.liquid
+++ b/snippets/shx-3d-render-input.liquid
@@ -567,7 +567,17 @@
             }
         }
 
+        function createInputLabelIfNotExists(inputID) {
+            if (!document.querySelector(`label[for="${inputID}-label"] span`)) {
+                const span = document.createElement("span");
+                span.style.marginLeft = `10px`
+                document.querySelector(`label[for="${inputID}-label"]`).appendChild(span)
+            }
+        }
+
         setTimeout(() => {
+            createInputLabelIfNotExists(inputID)
+
             showErrorMessageIfEmojiNotSupported(document.querySelector(`#${inputID}`).value, inputID)
             /*
             const event = new Event('input', {
@@ -577,12 +587,14 @@
             
             document.querySelector(`#${inputID}`).dispatchEvent(event); */
 
-            document.querySelector(`#${inputID}`).addEventListener('input', (e)=>{
-                if (!document.querySelector(`label[for="${inputID}-label"] span`)) {
+            document.querySelector(`#${inputID}`).addEventListener('input', (e) => {
+                createInputLabelIfNotExists(inputID)
+                
+                /*if (!document.querySelector(`label[for="${inputID}-label"] span`)) {
                     const span = document.createElement("span");
                     span.style.marginLeft = `10px`
                     document.querySelector(`label[for="${inputID}-label"]`).appendChild(span)
-                }
+                } */
                 document.querySelector(`label[for="${inputID}-label"] span`).style.display  = `inline`
                 document.querySelector(`label[for="${inputID}-label"] span`).style.color = null;
                 document.querySelector(`label[for="${inputID}-label"] span`).textContent = e.target.value.length + ' von ' + maxLength + ' Zeichen verwendet';