From 4e4d72e8e19ea7f5b1ed5628d9cdb992584adc41 Mon Sep 17 00:00:00 2001
From: Lam Nguyen <la.nguyen@f5.com>
Date: Thu, 27 Mar 2025 07:47:51 -0700
Subject: [PATCH] fix: Product selector click is not working fully

---
 assets/css/v2/style.css          | 12 +++++++++++-
 assets/js/product-selector.js    | 11 +++++------
 layouts/partials/sidebar-v2.html | 16 ++++++++--------
 3 files changed, 24 insertions(+), 15 deletions(-)

diff --git a/assets/css/v2/style.css b/assets/css/v2/style.css
index e021d22..2ee1eee 100644
--- a/assets/css/v2/style.css
+++ b/assets/css/v2/style.css
@@ -486,7 +486,7 @@ atomic-search-layout atomic-layout-section[section="search"] {
   border: none;
   font-size: 1.25rem;
   width: 100%;
-  padding: 0.5rem;
+  padding: 0.5rem 0.5rem 0.5rem 1rem; /* 1rem to vertically align with searchbar text */
   cursor: pointer;
 }
 
@@ -508,6 +508,16 @@ atomic-search-layout atomic-layout-section[section="search"] {
   box-shadow: 3px 3px 0px var(--color-shadow);
 }
 
+button:has(~ .product-selector[style*="block"])
+  > .product-selector-button-icon {
+  transition: transform 0.25s ease-in-out;
+  transform: rotate(180deg);
+}
+
+button:has(~ .product-selector[style*="none"]) > .product-selector-button-icon {
+  transition: transform 0.25s ease-in-out;
+  transform: rotate(0deg);
+}
 .product-selector p {
   font-size: 0.75rem;
   color: var(--color-product-title);
diff --git a/assets/js/product-selector.js b/assets/js/product-selector.js
index 2b57a7d..909b9f5 100644
--- a/assets/js/product-selector.js
+++ b/assets/js/product-selector.js
@@ -4,11 +4,12 @@ document.addEventListener('DOMContentLoaded', () => {
     'product-selector-button'
   );
 
-  if (productSelectorButton === null || productSelectorButton == null) {
+  if (productSelectorButton === null || productSelectorContent == null) {
     return;
   }
 
   productSelectorButton.addEventListener('click', () => {
+    /* Logic for hiding/showing ONLY when the button is clicked */
     if (productSelectorContent.style.display === 'block') {
       productSelectorContent.style.display = 'none';
       productSelectorButton.classList.remove('remove-bottom-radius');
@@ -19,12 +20,10 @@ document.addEventListener('DOMContentLoaded', () => {
   });
 
   window.addEventListener('click', (event) => {
-    if (
-      !event.target.matches('#product-selector-button') &&
-      !event.target.matches('#product-selector-button-icon')
-    ) {
+    /* Greedy Logic to hide the product selector when something other than the button is clicked. Assumes everything has an id containing "product-selector" */
+    if (!event.target.id.includes('product-selector')) {
       productSelectorContent.style.display = 'none';
+      productSelectorButton.classList.remove('remove-bottom-radius');
     }
-    productSelectorButton.classList.remove('remove-bottom-radius');
   });
 });
diff --git a/layouts/partials/sidebar-v2.html b/layouts/partials/sidebar-v2.html
index bb47473..bff6775 100644
--- a/layouts/partials/sidebar-v2.html
+++ b/layouts/partials/sidebar-v2.html
@@ -22,10 +22,10 @@
 
 <button class="product-selector-button" id="product-selector-button">
     {{/* product name and selector */}}
-    <div class="product-name">{{ $productName }}</div>
-    <div class="product-selector-button-icon">
-        <svg width="8" height="14" viewBox="0 0 8 14" fill="none" xmlns="http://www.w3.org/2000/svg">
-            <path d="M1 13L7 7L0.999999 1" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+    <div class="product-selector-name" id="product-selector-name">{{ $productName }}</div>
+    <div class="product-selector-button-icon" id="product-selector-button-icon">
+        <svg width="8" height="14" viewBox="0 0 8 14" fill="none" xmlns="http://www.w3.org/2000/svg" id="product-selector-chevron-icon">
+            <path d="M1 13L7 7L0.999999 1" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" id="product-selector-chevron-icon"/>
         </svg>     
     </div>
 </button>
@@ -41,11 +41,11 @@
     {{ $type := . }}
     {{ $products := index $groupedProducts $type }}
         <div class="product-selector-content" id="product-selector-content">
-            <p>{{ $type | humanize | title | upper }}</p>
-            <ul>
+            <p id="product-selector-content-product-group-name">{{ $type | humanize | title | upper }}</p>
+            <ul id="product-selector-content-product-container">
             {{ range $products }}
-                <li>
-                    <a href="{{ .url }}">{{ .title }}</a>
+                <li id="product-selector-content-product-name">
+                    <a id="product-selector-content-product-link" href="{{ .url }}">{{ .title }}</a>
                 </li>
             {{ end }}
             </ul>