fix(storefront): BCTHEME-207 fix focus on sort by

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)

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('=');

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',

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]');