fix(storefront): BCTHEME-207 fix focus on sort by select after reload…

…ing page
bigcommerce · Jan 21, 2021 · 5ac7c4c · 5ac7c4c
1 parent 2a3269e
commit 5ac7c4c
Showing 1 changed file with 9 additions and 12 deletions.
diff --git a/assets/js/theme/category.js b/assets/js/theme/category.js
@@ -9,21 +9,21 @@ export default class Category extends CatalogPage {
         super(context);
         this.validationDictionary = createTranslationDictionary(context);
         this.isSortBySelected = window.localStorage.getItem('sortByStatus');
-    }
 
-    keepActiveElementOnStorage($element) {
-        $element.on('change', () => window.localStorage.setItem('sortByStatus', 'selected'));
+        window.addEventListener('beforeunload', () => {
+            if (document.activeElement.id === 'sort') {
+                window.localStorage.setItem('sortByStatus', 'selected');
+            }
+        });
     }
 
-    arrangeFocusOnElement($element) {
+    onReady() {
+        const sortBySelector = $('#sort');
+
         if (this.isSortBySelected) {
-            $element.focus();
+            sortBySelector.focus();
             window.localStorage.removeItem('sortByStatus');
         }
-    }
-
-    onReady() {
-        const sortBySelector = $('[data-sort-by="product"] #sort');
 
         $('[data-button-type="add-cart"]').on('click', (e) => {
             $(e.currentTarget).next().attr({
@@ -32,9 +32,6 @@ export default class Category extends CatalogPage {
             });
         });
 
-        this.keepActiveElementOnStorage(sortBySelector);
-        this.arrangeFocusOnElement(sortBySelector);
-
         compareProducts(this.context.urls);
 
         if ($('#facetedSearch').length > 0) {