select with images

snippets/shx-3d-render-input.liquid

@@ -175,10 +175,6 @@
     {% endcomment %}
     let browserSupportsTextareaTextNodes;
 
-    /**
-    * @param {HTMLElement} input
-    * @return {boolean}
-    */
     function canManipulateViaTextNodes(input) {
         if (input.nodeName !== "TEXTAREA") {
             return false;
@@ -191,11 +187,6 @@
         return browserSupportsTextareaTextNodes;
     }
 
-    /**
-    * @param {HTMLTextAreaElement|HTMLInputElement} input
-    * @param {string} text
-    * @returns {void}
-    */
     function insertText(input, text) {
         // Most of the used APIs only work with the field selected
         input.focus();
@@ -515,7 +506,6 @@
                 for (let key in globalInputFormsObjValues) {
                     if (globalInputFormsObjValues[id][key] !== undefined) {
                         shx_globalValues[key] = globalInputFormsObjValues[id][key];
-
                         break;
                     }
                 }
@@ -539,9 +529,12 @@
         globalInputFormsObjValues[id][key] = value;
     }
 
+    // emoji picker element will be created by clicking the emoji
     function onClickEmojiPickerButton() {
         const emojiPickupPopup = document.getElementById("shx-emoji-picker-popup")
 
+        // checking if emoji picker already exists
+        // needs to be created every time the variant was changed because of rerendering all inputs
         if (emojiPickupPopup.childNodes.length === 0) {
             const emojiPicker = document.createElement("emoji-picker");
             emojiPicker.classList = "light shx-emoji-picker";
@@ -626,6 +619,16 @@
         // }
     }
 
+    function loadCustomEnhancedDropdownSelectedValue() {
+        const selectElement = document.querySelector('.shx-custom-enhanced-dropdown-font-hide-dummy-select');
+
+        selectElement.value = document.getElementById('shx-custom-enhanced-dropdown-font-select-selected-value').innerText;
+    
+        // Trigger change event
+        const eventChange = new Event('change', { bubbles: true });
+        selectElement.dispatchEvent(eventChange);
+    };
+
     function SHX_IFC_genDropdownSelect(inputID, labelText, inputName, inputVal, options, section_id) {
         let html = `
             <label class="form__label custom shx-ifc-form_label" for="${inputID}-label">${labelText}</label>
@@ -643,7 +646,7 @@
                 <div class="shx-custom-enhanced-dropdown field custom">
                     <button class="shx-custom-enhanced-dropdown-dropbtn" onclick="toggleCustomEnhancedDropdownFont()">
                         <div style="display: flex; justify-content: space-between; align-items: center; pointer-events: none">
-                            <span id="shx-custom-enhanced-dropdown-font-select-selected-value">font</span>
+                            <span id="shx-custom-enhanced-dropdown-font-select-selected-value">lade...</span>
                         
                             <div style="display: flex; align-items: center; gap: 8px">
                                 <svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#131213"><path d="M480-344 240-584l56-56 184 184 184-184 56 56-240 240Z"/></svg>
@@ -689,6 +692,8 @@
 
         console.log("customDropdownHtml", customDropdownHtml)
 
+        loadCustomEnhancedDropdownSelectedValue()
+
         return html;
     }