From 9ca50e9312b4d6c79de47469c113e04888a229b5 Mon Sep 17 00:00:00 2001
From: "alex.saiannyi" <alexander.saiannyi@bigcommerce.com>
Date: Thu, 21 Jan 2021 16:05:58 +0200
Subject: [PATCH] fix(storefront): BCTHEME-207 fix focus on sort by

---
 CHANGELOG.md                |  1 +
 assets/js/theme/catalog.js  | 19 +++++++++++++++++++
 assets/js/theme/category.js |  2 ++
 assets/js/theme/search.js   |  1 +
 4 files changed, 23 insertions(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index d13b4c9019..78da25f52b 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,6 +1,7 @@
 # Changelog
 
 ## Draft
+- Fixed focus for sort by dropdown on reloading page. [#1964](https://github.com/bigcommerce/cornerstone/pull/1964)
 - Updated Cornerstone theme and respected variants to meet the verticals/industries documented in BCTHEME-387
 - Fixed selecting certain option types which pushes window view to the bottom of the page. [#1959](https://github.com/bigcommerce/cornerstone/pull/1959)
 - Fixed case when default option is out of stock add to cart button does not populate for in stock options. [#1955](https://github.com/bigcommerce/cornerstone/pull/1955)
diff --git a/assets/js/theme/catalog.js b/assets/js/theme/catalog.js
index be42a30d5e..8286054cbf 100644
--- a/assets/js/theme/catalog.js
+++ b/assets/js/theme/catalog.js
@@ -3,6 +3,25 @@ import urlUtils from './common/utils/url-utils';
 import Url from 'url';
 
 export default class CatalogPage extends PageManager {
+    constructor(context) {
+        super(context);
+
+        window.addEventListener('beforeunload', () => {
+            if (document.activeElement.id === 'sort') {
+                window.localStorage.setItem('sortByStatus', 'selected');
+            }
+        });
+    }
+
+    arrangeFocusOnSortBy() {
+        const $sortBySelector = $('[data-sort-by="product"] #sort');
+
+        if (window.localStorage.getItem('sortByStatus')) {
+            $sortBySelector.focus();
+            window.localStorage.removeItem('sortByStatus');
+        }
+    }
+
     onSortBySubmit(event, currentTarget) {
         const url = Url.parse(window.location.href, true);
         const queryParams = $(currentTarget).serialize().split('=');
diff --git a/assets/js/theme/category.js b/assets/js/theme/category.js
index 2a7bee8a5f..9712e5d20f 100644
--- a/assets/js/theme/category.js
+++ b/assets/js/theme/category.js
@@ -11,6 +11,8 @@ export default class Category extends CatalogPage {
     }
 
     onReady() {
+        this.arrangeFocusOnSortBy();
+
         $('[data-button-type="add-cart"]').on('click', (e) => {
             $(e.currentTarget).next().attr({
                 role: 'status',
diff --git a/assets/js/theme/search.js b/assets/js/theme/search.js
index d9ddaadcbf..97a2ded2e7 100644
--- a/assets/js/theme/search.js
+++ b/assets/js/theme/search.js
@@ -162,6 +162,7 @@ export default class Search extends CatalogPage {
 
     onReady() {
         compareProducts(this.context.urls);
+        this.arrangeFocusOnSortBy();
         this.setupSortByQuerySearchParam();
 
         const $searchForm = $('[data-advanced-search-form]');