fix(GeoSearch): correctly unmount the widget (#2846)

algolia · Mar 29, 2018 · f31ef3c · f31ef3c
1 parent 598ca68
commit f31ef3c
Show file tree

Hide file tree

Showing 3 changed files with 53 additions and 9 deletions.
diff --git a/src/widgets/geo-search/GeoSearchRenderer.js b/src/widgets/geo-search/GeoSearchRenderer.js
@@ -1,5 +1,5 @@
 import React, { render } from 'preact-compat';
-import { getContainerNode, prepareTemplateProps } from '../../lib/utils';
+import { prepareTemplateProps } from '../../lib/utils';
 import GeoSearchControls from '../../components/GeoSearchControls/GeoSearchControls';
 
 const refineWithMap = ({ refine, paddingBoundingBox, mapInstance }) => {
@@ -76,16 +76,14 @@ const renderer = (
     renderState,
   } = widgetParams;
 
-  const containerNode = getContainerNode(container);
-
   if (isFirstRendering) {
     renderState.isUserInteraction = true;
     renderState.isPendingRefine = false;
     renderState.markers = [];
 
     const rootElement = document.createElement('div');
     rootElement.className = cssClasses.root;
-    containerNode.appendChild(rootElement);
+    container.appendChild(rootElement);
 
     const mapElement = document.createElement('div');
     mapElement.className = cssClasses.map;
@@ -244,7 +242,7 @@ const renderer = (
       onClearClick={clearMapRefinement}
       templateProps={renderState.templateProps}
     />,
-    containerNode.querySelector(`.${cssClasses.controls}`)
+    container.querySelector(`.${cssClasses.controls}`)
   );
 };
 

diff --git a/src/widgets/geo-search/__tests__/geo-search-test.js b/src/widgets/geo-search/__tests__/geo-search-test.js
@@ -1,5 +1,5 @@
 import last from 'lodash/last';
-import { render } from 'preact-compat';
+import { render, unmountComponentAtNode } from 'preact-compat';
 import algoliasearchHelper from 'algoliasearch-helper';
 import createHTMLMarker from '../createHTMLMarker';
 import renderer from '../GeoSearchRenderer';
@@ -9,6 +9,7 @@ jest.mock('preact-compat', () => {
   const module = require.requireActual('preact-compat');
 
   module.render = jest.fn();
+  module.unmountComponentAtNode = jest.fn();
 
   return module;
 });
@@ -115,6 +116,7 @@ describe('GeoSearch', () => {
   beforeEach(() => {
     render.mockClear();
     renderer.mockClear();
+    unmountComponentAtNode.mockClear();
   });
 
   it('expect to render', () => {
@@ -328,6 +330,39 @@ describe('GeoSearch', () => {
     });
   });
 
+  it('expect to unmount', () => {
+    const container = createContainer();
+    const instantSearchInstance = createFakeInstantSearch();
+    const helper = createFakeHelper();
+    const googleReference = createFakeGoogleReference();
+
+    const widget = geoSearch({
+      googleReference,
+      container,
+    });
+
+    widget.init({
+      helper,
+      instantSearchInstance,
+      state: helper.state,
+    });
+
+    widget.render({
+      helper,
+      instantSearchInstance,
+      results: {
+        hits: [],
+      },
+    });
+
+    widget.dispose({
+      helper,
+      state: helper.state,
+    });
+
+    expect(unmountComponentAtNode).toHaveBeenCalledTimes(1);
+  });
+
   describe('setup events', () => {
     it('expect to listen for "idle" once and trigger the registration of the rest of the listeners', () => {
       const container = createContainer();

diff --git a/src/widgets/geo-search/geo-search.js b/src/widgets/geo-search/geo-search.js
@@ -1,6 +1,7 @@
 import cx from 'classnames';
 import noop from 'lodash/noop';
-import { bemHelper, renderTemplate } from '../../lib/utils';
+import { unmountComponentAtNode } from 'preact-compat';
+import { getContainerNode, bemHelper, renderTemplate } from '../../lib/utils';
 import connectGeoSearch from '../../connectors/geo-search/connectGeoSearch';
 import renderer from './GeoSearchRenderer';
 import defaultTemplates from './defaultTemplates';
@@ -175,6 +176,8 @@ const geoSearch = ({
     throw new Error(`Must provide a "googleReference". ${usage}`);
   }
 
+  const containerNode = getContainerNode(container);
+
   const cssClasses = {
     root: cx(bem(null), userCssClasses.root),
     map: cx(bem('map'), userCssClasses.map),
@@ -243,12 +246,20 @@ const geoSearch = ({
     : customHTMLMarker;
 
   try {
-    const makeGeoSearch = connectGeoSearch(renderer);
+    const makeGeoSearch = connectGeoSearch(renderer, () => {
+      unmountComponentAtNode(
+        containerNode.querySelector(`.${cssClasses.controls}`)
+      );
+
+      while (containerNode.firstChild) {
+        containerNode.removeChild(containerNode.firstChild);
+      }
+    });
 
     return makeGeoSearch({
       ...widgetParams,
       renderState: {},
-      container,
+      container: containerNode,
       googleReference,
       initialZoom,
       initialPosition,