From bdd67cbbf11e0cc014e9368db949f402b72f2d2a Mon Sep 17 00:00:00 2001
From: Patrick Racicot <patrick.racicot@shopify.com>
Date: Mon, 2 Oct 2023 16:09:23 -0400
Subject: [PATCH] [Facets] fix mobile count update (#3018)

---
 assets/facets.js | 68 +++++++++++++++++++++++-------------------------
 1 file changed, 33 insertions(+), 35 deletions(-)

diff --git a/assets/facets.js b/assets/facets.js
index 1296864348b..6a242c1cc7d 100644
--- a/assets/facets.js
+++ b/assets/facets.js
@@ -120,7 +120,18 @@ class FacetFiltersForm extends HTMLElement {
     FacetFiltersForm.renderActiveFacets(parsedHTML);
     FacetFiltersForm.renderAdditionalElements(parsedHTML);
 
-    if (countsToRender) FacetFiltersForm.renderCounts(countsToRender, event.target.closest('.js-filter'));
+    if (countsToRender) {
+      const closestJSFilterID = event.target.closest('.js-filter').id;
+      const currentActiveID = document.activeElement.id;
+
+      if (closestJSFilterID) {
+        FacetFiltersForm.renderCounts(countsToRender, event.target.closest('.js-filter'));
+        FacetFiltersForm.renderMobileCounts(countsToRender, document.getElementById(closestJSFilterID));
+
+        const newElementToActivate = document.getElementById(currentActiveID);
+        if (newElementToActivate) newElementToActivate.focus();
+      }
+    }
   }
 
   static renderActiveFacets(html) {
@@ -147,47 +158,34 @@ class FacetFiltersForm extends HTMLElement {
   }
 
   static renderCounts(source, target) {
-    const filterIsDrawer = Boolean(document.querySelector('.facets-container-drawer'));
-    const targetElement = filterIsDrawer
-      ? target.querySelector('.mobile-facets__list')
-      : target.querySelector('.facets__selected');
-    const sourceElement = filterIsDrawer
-      ? source.querySelector('.mobile-facets__list')
-      : source.querySelector('.facets__selected');
-
-    const targetElementAccessibility = filterIsDrawer && target.querySelector('.facets__summary');
-    const sourceElementAccessibility = filterIsDrawer && source.querySelector('.facets__summary');
-
-    if (sourceElement && targetElement) {
-      const currentActiveID = document.activeElement.id;
-      const isShowingMore = Boolean(target.querySelector('show-more-button .label-show-more.hidden'));
+    const targetSummary = target.querySelector('.facets__summary');
+    const sourceSummary = source.querySelector('.facets__summary');
 
-      if (sourceElement && targetElement) {
-        targetElement.outerHTML = sourceElement.outerHTML;
-      }
+    if (sourceSummary && targetSummary) {
+      targetSummary.outerHTML = sourceSummary.outerHTML;
+    }
 
-      if (!filterIsDrawer) {
-        const targetWrapElement = target.querySelector('.facets-wrap');
-        const sourceWrapElement = source.querySelector('.facets-wrap');
-        if (sourceWrapElement && targetWrapElement) {
-          if (isShowingMore) {
-            sourceWrapElement
-              .querySelectorAll('.facets__item.hidden')
-              .forEach((x) => x.classList.replace('hidden', 'show-more-item'));
-          }
+    const targetWrapElement = target.querySelector('.facets-wrap');
+    const sourceWrapElement = source.querySelector('.facets-wrap');
 
-          targetWrapElement.outerHTML = sourceWrapElement.outerHTML;
-        }
+    if (sourceWrapElement && targetWrapElement) {
+      const isShowingMore = Boolean(target.querySelector('show-more-button .label-show-more.hidden'));
+      if (isShowingMore) {
+        sourceWrapElement
+          .querySelectorAll('.facets__item.hidden')
+          .forEach((hiddenItem) => hiddenItem.classList.replace('hidden', 'show-more-item'));
       }
 
-      const newElementToActivate = document.getElementById(`${currentActiveID}`);
-      if (newElementToActivate) {
-        newElementToActivate.focus();
-      }
+      targetWrapElement.outerHTML = sourceWrapElement.outerHTML;
     }
+  }
+
+  static renderMobileCounts(source, target) {
+    const targetFacetsList = target.querySelector('.mobile-facets__list');
+    const sourceFacetsList = source.querySelector('.mobile-facets__list');
 
-    if (targetElementAccessibility && sourceElementAccessibility) {
-      target.querySelector('.facets__summary').outerHTML = source.querySelector('.facets__summary').outerHTML;
+    if (sourceFacetsList && targetFacetsList) {
+      targetFacetsList.outerHTML = sourceFacetsList.outerHTML;
     }
   }