From 0c312a2fbb337cccd71708c5842280b1a2e17f40 Mon Sep 17 00:00:00 2001
From: alexanderroese <github@roese.dev>
Date: Sat, 13 Jul 2024 17:55:50 +0200
Subject: [PATCH] dropdown for product variant picker

---
 snippets/product-variant-picker.liquid | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/snippets/product-variant-picker.liquid b/snippets/product-variant-picker.liquid
index a71697d..8705736 100644
--- a/snippets/product-variant-picker.liquid
+++ b/snippets/product-variant-picker.liquid
@@ -156,6 +156,7 @@
       {% endif %}
 
       <script>
+        const selectElement = document.querySelector('.field__input');
         const dropdownContent = document.getElementById('shx-custom-dropdown-content');
         const selectedButton = document.getElementById('shx-custom-selected');
       
@@ -168,6 +169,9 @@
             const selectedVariant = event.currentTarget.getAttribute('data-value');
             selectedButton.innerText = event.currentTarget.innerText;
       
+            // Set the selected option in the original select element
+            selectElement.value = selectedVariant;
+      
             // Remove the selected style from all items
             document.querySelectorAll('.shx-custom-dropdown-content div').forEach(div => {
               div.classList.remove('shx-custom-selected-variant');
@@ -185,12 +189,8 @@
         // Close the dropdown if the user clicks outside of it
         window.addEventListener('click', function(event) {
           if (!event.target.matches('.shx-custom-dropbtn')) {
-            const dropdowns = document.getElementsByClassName('shx-custom-dropdown-content');
-            for (let i = 0; i < dropdowns.length; i++) {
-              const openDropdown = dropdowns[i];
-              if (openDropdown.style.display === 'block') {
-                openDropdown.style.display = 'none';
-              }
+            if (dropdownContent.style.display === 'block') {
+              dropdownContent.style.display = 'none';
             }
           }
         });