PR Feedback

network-api/networkapi/templates/fragments/buyersguide/pni_sort_dropdown.html

@@ -8,7 +8,7 @@
       tw-m-0 tw-p-0 tw-ml-2
       tw-flex
       tw-items-center
-      tw-w-[250px]
+      tw-min-w-[250px]
       "
   >
     <li
@@ -29,10 +29,10 @@
     </li>
 
     
-    <li aria-expanded="false" role="list" class="tw-absolute tw-top-0 tw-hidden tw-right-0 pni-creepiness__list-container tw-z-50 tw-bg-white tw-border tw-border-gray-20">
-      <ul class="pni-creepiness__list tw-w-full tw-list-none tw-m-0 tw-p-0">
+    <li aria-expanded="false" role="list" class="pni-creepiness__list-container tw-absolute tw-top-0 tw-invisible tw-select-none tw-pointer-events-none tw-right-0 tw-z-50 tw-bg-white tw-border tw-border-gray-20">
+      <ul class="pni-creepiness__list tw-w-max tw-list-none tw-m-0 tw-p-0">
         <li class="pni-creepiness__list-item tw-whitespace-nowrap tw-p-3 tw-text-sm tw-font-bold tw-group tw-font-sans tw-flex tw-items-center tw-overflow-ellipsis" tabindex="0" id="option-1" data-value="ASCENDING">
-          <div class="tw-flex tw-items-center tw-text-sm tw-font-bold tw-text-gray-40 group-hover:tw-text-black tw-font-sans tw-pointer-events-none">
+          <div class="tw-pr-4 tw-w-full tw-flex tw-items-center tw-text-sm tw-font-bold tw-text-gray-40 group-hover:tw-text-black tw-font-sans tw-pointer-events-none">
             <img src="{% static "_images/buyers-guide/cry-face.svg" %}" class="tw-mr-2" />
             {% trans "Creepiness: Least – Most" %}
           </div>
@@ -42,13 +42,13 @@
           </svg>
         </li>
         <li class="pni-creepiness__list-item tw-whitespace-nowrap tw-p-3 tw-text-sm tw-font-bold tw-group tw-font-sans tw-flex tw-items-center tw-overflow-ellipsis" tabindex="0" id="option-2" data-value="DESCENDING">
-          <div class="tw-flex tw-items-center tw-text-sm tw-font-bold tw-text-gray-40 group-hover:tw-text-black tw-font-sans tw-pointer-events-none">
+          <div class="tw-pr-4 tw-w-full tw-flex tw-items-center tw-text-sm tw-font-bold tw-text-gray-40 group-hover:tw-text-black tw-font-sans tw-pointer-events-none">
             <img src="{% static "_images/buyers-guide/shock-face.svg" %}" class="tw-mr-2" />
             {% trans "Creepiness: Most – Least" %}
           </div>
         </li>
         <li class="pni-creepiness__list-item tw-whitespace-nowrap tw-p-3 tw-text-sm tw-font-bold tw-group tw-font-sans tw-flex tw-items-center tw-overflow-ellipsis" tabindex="0" id="option-3" data-value="ALPHA">
-          <div class="tw-flex tw-items-center tw-text-sm tw-font-bold tw-text-gray-40 group-hover:tw-text-black tw-font-sans tw-pointer-events-none mr-auto">
+          <div class="tw-pr-4 tw-w-full tw-flex tw-items-center tw-text-sm tw-font-bold tw-text-gray-40 group-hover:tw-text-black tw-font-sans tw-pointer-events-none mr-auto">
             <img src="{% static "_images/buyers-guide/alpha-emoji.png" %}" class="tw-mr-2" />
             {% trans "Alphabetical" %}
           </div>

source/js/buyers-guide/search/pni-sort-dropdown.js

@@ -76,6 +76,8 @@ export class PNISortDropdown {
         )
         .click();
     }
+    // Used to recalculate dropdown width based on absolute select options
+    this.dropdown.style.width = `${this.list.getBoundingClientRect().width}px`;
   }
 
   setSelectedListItem(e, pushUpdate = true) {
@@ -95,7 +97,11 @@ export class PNISortDropdown {
   }
 
   closeList() {
-    this.listContainer.classList.add("tw-hidden");
+    this.listContainer.classList.add(
+      "tw-invisible",
+      "tw-select-none",
+      "tw-pointer-events-none"
+    );
     this.listContainer.setAttribute("aria-expanded", false);
   }
 
@@ -108,11 +114,19 @@ export class PNISortDropdown {
     }
 
     if (e.type === "click" || openDropDown) {
-      this.listContainer.classList.remove("tw-hidden");
+      this.listContainer.classList.remove(
+        "tw-invisible",
+        "tw-select-none",
+        "tw-pointer-events-none"
+      );
 
       this.listContainer.setAttribute(
         "aria-expanded",
-        this.listContainer.classList.contains("tw-hidden")
+        this.listContainer.classList.contains(
+          "tw-invisible",
+          "tw-select-none",
+          "tw-pointer-events-none"
+        )
       );
     }