fix(index): subscribe to state change only after init for uiState (#4003)

Author: samouss

src/widgets/index/__tests__/index-test.ts

@@ -862,6 +862,43 @@ See documentation: https://www.algolia.com/doc/api-reference/widgets/index/js/"
       });
     });
 
+    it('does not update the local `uiState` on state changes in `init`', () => {
+      const instance = index({ indexName: 'index_name' });
+      const instantSearchInstance = createInstantSearch();
+      const widgets = [
+        createSearchBox(),
+        createPagination(),
+        createWidget({
+          init({ helper }) {
+            helper
+              .setQueryParameter('query', 'Apple iPhone')
+              .setQueryParameter('page', 5);
+          },
+        }),
+      ];
+
+      instance.addWidgets(widgets);
+
+      instance.init(
+        createInitOptions({
+          instantSearchInstance,
+        })
+      );
+
+      expect(instance.getHelper()!.state).toEqual(
+        new SearchParameters({
+          index: 'index_name',
+          query: 'Apple iPhone',
+          page: 5,
+        })
+      );
+
+      expect(instance.getWidgetState({})).toEqual({
+        // eslint-disable-next-line @typescript-eslint/camelcase
+        index_name: {},
+      });
+    });
+
     it('updates the local `uiState` only with widgets not indices', () => {
       const level0 = index({ indexName: 'level_0_index_name' });
       const level1 = index({ indexName: 'level_1_index_name' });

src/widgets/index/index.ts

@@ -286,12 +286,11 @@ const index = (props: IndexProps): Index => {
         mergeSearchParameters(...resolveSearchParameters(this))
       );
 
-      helper.on('change', ({ state, isPageReset }) => {
-        localUiState = getLocalWidgetsState(localWidgets, {
-          searchParameters: state,
-          helper: helper!,
-        });
-
+      // Subscribe to the Helper state changes for the page before widgets
+      // are initialized. This behavior mimics the original one of the Helper.
+      // It makes sense to replicate it at the `init` step. We have another
+      // listener on `change` below, once `init` is done.
+      helper.on('change', ({ isPageReset }) => {
         if (isPageReset) {
           resetPageFromWidgets(localWidgets);
         }
@@ -324,6 +323,19 @@ const index = (props: IndexProps): Index => {
           });
         }
       });
+
+      // Subscribe to the Helper state changes for the `uiState` once widgets
+      // are initialized. Until the first render, state changes are part of the
+      // configuration step. This is mainly for backward compatibility with custom
+      // widgets. When the subscription happens before the `init` step, the (static)
+      // configuration of the widget is pushed in the URL. That's what we want to avoid.
+      // https://github.com/algolia/instantsearch.js/pull/994/commits/4a672ae3fd78809e213de0368549ef12e9dc9454
+      helper.on('change', ({ state }) => {
+        localUiState = getLocalWidgetsState(localWidgets, {
+          searchParameters: state,
+          helper: helper!,
+        });
+      });
     },
 
     render({ instantSearchInstance }: IndexRenderOptions) {