From 558657621e9aa9c1ee1c8d812a13f54f060dab38 Mon Sep 17 00:00:00 2001
From: Anas <93322743+bj-anas@users.noreply.github.com>
Date: Mon, 13 Nov 2023 10:08:12 +0100
Subject: [PATCH] YSHOP2-1031: COD themes > theme 1 > dropdown menu bugs (#416)

## Ticket

[YSHOP2-1031](https://youcanshop.atlassian.net/browse/YSHOP2-1031)

## QA Steps

- [ ] `pnpm i`
- [ ] `pnpm dev`
- [ ] Make sure that you have more than one dropdown variant in your
product
- [ ] Verify that we have corrected the functionality of the dropdown
menu


[YSHOP2-1031]:
https://youcanshop.atlassian.net/browse/YSHOP2-1031?atlOrigin=eyJpIjoiNWRkNTljNzYxNjVmNDY3MDlhMDU5Y2ZhYzA5YTRkZjUiLCJwIjoiZ2l0aHViLWNvbS1KU1cifQ
---
 assets/dropdown-menu.js          | 76 +++++++++++++++++++++-----------
 assets/queries-handler.js        |  7 +--
 snippets/product-variants.liquid |  4 +-
 3 files changed, 54 insertions(+), 33 deletions(-)

diff --git a/assets/dropdown-menu.js b/assets/dropdown-menu.js
index 89d5f494..63d7f9f7 100644
--- a/assets/dropdown-menu.js
+++ b/assets/dropdown-menu.js
@@ -1,42 +1,66 @@
-const dropdownBtn = $('.dropbtn');
-const dropdownContent = $('.dropdown-content');
-const dropdownOptions = dropdownContent?.querySelectorAll('li');
-
-function showDropDownMenu(customContent) {
-  if(customContent) {
-      customContent.classList.toggle('show');
-  } else if (dropdownContent) {
-      dropdownContent.classList.toggle('show');
-  }
+/**
+ * @param {HTMLElement} element
+ */
+function showDropDownMenu(element) {
+  element.classList.toggle('show');
 }
 
-const hideDropDownMenu = (event) => {
+/**
+ * @param {HTMLElement} element
+ * @param {Event} event
+ */
+function hideDropDownMenu(element, event)  {
   if (!event.target.matches('.dropbtn, .dropbtn *')) {
-    dropdownContent?.classList.remove('show');
+    element?.classList.remove('show');
   }
-};
-
-window.addEventListener('click', (event) => hideDropDownMenu(event));
+}
 
-function selectOption(e) {
-  const selectedOption = e.target;
+/**
+ * @param {HTMLElement} element
+ * @param {HTMLElement} options
+ * @param {Event} event
+ */
+function selectOption(element, options, event) {
+  const selectedOption = event.target;
 
-  dropdownOptions.forEach((option) => {
+  options.forEach((option) => {
     option.classList.remove('selected');
   });
 
   selectedOption.classList.add('selected');
-  dropdownBtn.firstElementChild.textContent = selectedOption.textContent;
+  element.firstElementChild.textContent = selectedOption.textContent;
 }
 
-if(dropdownOptions) {
-  dropdownOptions.forEach((option) => {
-    option.addEventListener('click', selectOption);
+function dropdownMenu() {
+  const dropdownInputs = document.querySelectorAll('.dropdown-input');
+
+  if(dropdownInputs.length === 0) {
+    return;
+  }
+
+  dropdownInputs.forEach((dropDownInput) => {
+    const selectInput = dropDownInput.querySelector('.dropbtn');
+    const dropdownContent = dropDownInput.querySelector('.dropdown-content');
 
-    window.addEventListener('DOMContentLoaded', (event) => {
-      if (option.classList.contains('selected')) {
-        dropdownBtn.firstElementChild.textContent = option.textContent;
-      }
+    selectInput.addEventListener('click', () => showDropDownMenu(dropdownContent));
+    window.addEventListener('click', (event) => hideDropDownMenu(dropdownContent, event));
+
+    const selectOptions = dropdownContent.querySelectorAll('li');
+
+    if(selectOptions.length === 0) {
+      return;
+    }
+
+    selectOptions.forEach((option) => {
+      option.addEventListener('click', (event) => selectOption(selectInput, selectOptions, event));
+
+      window.addEventListener('DOMContentLoaded', (event) => {
+        if (option.classList.contains('selected')) {
+          selectInput.firstElementChild.textContent = option.textContent;
+        }
+      });
     });
   });
 }
+
+dropdownMenu();
diff --git a/assets/queries-handler.js b/assets/queries-handler.js
index 548314c9..0400fc6f 100644
--- a/assets/queries-handler.js
+++ b/assets/queries-handler.js
@@ -53,10 +53,7 @@ if (searchTitle) {
   searchTitle.innerHTML = query;
 }
 // dropdown select
-function setupDropdown(dropdownBtn, dropdownContent, convertUrlWithMultipleQuery) {
-  // Handle the click event for the dropdown button
-  dropdownBtn.addEventListener('click', () => showDropDownMenu(dropdownContent));
-
+function setupDropdown(dropdownContent, convertUrlWithMultipleQuery) {
   // Handle the click event for the options in the dropdown
   dropdownContent.addEventListener('click', (event) => {
     event.preventDefault();
@@ -89,7 +86,7 @@ function filterProduct() {
 
     selectedOption.style.fontWeight = 'bold';
 
-    setupDropdown(filterDropdownBtn, filterDropdownContent, convertUrlWithMultipleQuery);
+    setupDropdown(filterDropdownContent, convertUrlWithMultipleQuery);
   }
 }
 
diff --git a/snippets/product-variants.liquid b/snippets/product-variants.liquid
index ddc732f2..b0bb0404 100644
--- a/snippets/product-variants.liquid
+++ b/snippets/product-variants.liquid
@@ -12,9 +12,9 @@
       </label>
       {% case option.type %}
         {% when 'dropdown' %}
-          <div class='dropdown-input' onclick='showDropDownMenu()'>
+          <div class='dropdown-input'>
             <div class='dropbtn'>
-              <span class='option-name'>hello</span>
+              <span class='option-name'></span>
               <ion-icon name='chevron-down-outline' class='dropdown-icon'/>
             </div>
             <ul class='dropdown-content' name='{{ option.name }}'>