fix(connectSortBy): never update the initial index (#4015)

* fix(connectSortBy): never update the initial index

* chore: review comment wording

Author: samouss

src/connectors/sort-by/__tests__/connectSortBy-test.js

@@ -373,6 +373,49 @@ See documentation: https://www.algolia.com/doc/api-reference/widgets/sort-by/js/
         });
         expect(uiStateAfter).toBe(uiStateBefore);
       });
+
+      test('should use the top-level `indexName` for the initial index', () => {
+        const render = () => {};
+        const makeWidget = connectSortBy(render);
+        const instantSearchInstance = instantSearch({
+          indexName: 'initial_index_name',
+          searchClient: { search() {} },
+        });
+
+        const widget = makeWidget({
+          items: [
+            { label: 'Sort products', value: 'initial_index_name' },
+            { label: 'Sort products by price', value: 'index_name_price' },
+            { label: 'Sort products by magic', value: 'index_name_magic' },
+          ],
+        });
+
+        const helper = jsHelper({}, 'initial_index_name');
+        helper.search = jest.fn();
+
+        // Simulate an URLSync
+        helper.setQueryParameter('index', 'index_name_price');
+
+        widget.init({
+          helper,
+          state: helper.state,
+          createURL: () => '#',
+          onHistoryChange: () => {},
+          instantSearchInstance,
+        });
+
+        const actual = widget.getWidgetState(
+          {},
+          {
+            searchParameters: helper.state,
+            helper,
+          }
+        );
+
+        expect(actual).toEqual({
+          sortBy: 'index_name_price',
+        });
+      });
     });
 
     describe('getWidgetSearchParameters', () => {

src/connectors/sort-by/connectSortBy.js

@@ -102,25 +102,35 @@ export default function connectSortBy(renderFn, unmountFn = noop) {
 
     return {
       init({ helper, instantSearchInstance }) {
-        const initialIndex = helper.state.index;
-        const isInitialIndexInItems = find(
+        const currentIndex = helper.state.index;
+        const isCurrentIndexInItems = find(
           items,
-          item => item.value === initialIndex
+          item => item.value === currentIndex
         );
 
-        this.initialIndex = initialIndex;
+        // The `initialIndex` is the one set at the top level not the one used
+        // at `init`. The value of `index` at `init` could come from the URL. We
+        // want the "real" initial value, this one should never change. If it changes
+        // between the lifecycles of the widget the current refinement won't be
+        // pushed into the `uiState`. Because we never push the "initial" value to
+        // avoid to pollute the URL.
+        // Note that it might be interesting to manage this at the state mapping
+        // level and always push the index value into  the `uiState`. It is a
+        // breaking change.
+        // @MAJOR
+        this.initialIndex = instantSearchInstance.indexName;
         this.setIndex = indexName => {
           helper.setIndex(indexName).search();
         };
 
         warning(
-          isInitialIndexInItems,
-          `The index named "${initialIndex}" is not listed in the \`items\` of \`sortBy\`.`
+          isCurrentIndexInItems,
+          `The index named "${currentIndex}" is not listed in the \`items\` of \`sortBy\`.`
         );
 
         renderFn(
           {
-            currentRefinement: initialIndex,
+            currentRefinement: currentIndex,
             options: transformItems(items),
             refine: this.setIndex,
             hasNoResults: true,