From fb18f0d61649b43de47cc7696b17a32cd2e6d009 Mon Sep 17 00:00:00 2001
From: bietkul <kuldepsaxena155@gmail.com>
Date: Fri, 16 Dec 2022 13:17:12 +0530
Subject: [PATCH] fix: remove component from DOM on unmount

---
 packages/vue/src/components/Provider.js          | 10 +++++-----
 .../src/components/basic/ComponentWrapper.jsx    | 16 ++++++++++++----
 .../web/src/components/basic/ComponentWrapper.js | 15 ++++++++++++---
 3 files changed, 29 insertions(+), 12 deletions(-)

diff --git a/packages/vue/src/components/Provider.js b/packages/vue/src/components/Provider.js
index 80bafe9236..110b79fe56 100644
--- a/packages/vue/src/components/Provider.js
+++ b/packages/vue/src/components/Provider.js
@@ -7,16 +7,16 @@ export default {
 			validator(store) {
 				if (!store.dispatch && !store.subscribe && !store.getState) {
 					throw new Error(
-						'[reactivesearch-vue] - store provided is not a valid redux store'
+						'[reactivesearch-vue] - store provided is not a valid redux store',
 					);
 				}
 				return true;
-			}
+			},
 		},
 		analyticsRef: {
 			type: Object,
-			required: true,
-		}
+			required: false,
+		},
 	},
 	provide() {
 		return {
@@ -29,5 +29,5 @@ export default {
 			return h('div', this.$slots.default);
 		}
 		return this.$slots.default[0];
-	}
+	},
 };
diff --git a/packages/vue/src/components/basic/ComponentWrapper.jsx b/packages/vue/src/components/basic/ComponentWrapper.jsx
index 4aae723c4d..d720917022 100644
--- a/packages/vue/src/components/basic/ComponentWrapper.jsx
+++ b/packages/vue/src/components/basic/ComponentWrapper.jsx
@@ -34,8 +34,9 @@ const ComponentWrapper = (
 	},
 ) => ({
 	name: 'ComponentWrapper',
+	$timestamp: null,
 	props: {
-		destroyOnUnmount: VueTypes.bool.def(false),
+		destroyOnUnmount: VueTypes.bool.def(true),
 	},
 	created() {
 		// clone the props for component it is needed because attrs gets changed on time
@@ -48,6 +49,7 @@ const ComponentWrapper = (
 		this.componentProps = parsedProps;
 		this.componentId = this.componentProps.componentId;
 		this.react = this.componentProps.react;
+		this.$timestamp = new Date().getTime();
 	},
 	beforeMount() {
 		let components = [];
@@ -100,10 +102,16 @@ const ComponentWrapper = (
 	},
 	beforeDestroy() {
 		if (this.destroyOnUnmount) {
+			let registeredComponentsTimestamps = {};
+			if (this.$$store) {
+				({ registeredComponentsTimestamps } = this.$$store.getState());
+			}
 			// Unregister components
-			this.removeComponent(this.componentId);
-			if (this.internalComponent) {
-				this.removeComponent(this.internalComponent);
+			if (registeredComponentsTimestamps[this.componentId] === this.$timestamp) {
+				this.removeComponent(this.componentId);
+				if (this.internalComponent) {
+					this.removeComponent(this.internalComponent);
+				}
 			}
 		}
 	},
diff --git a/packages/web/src/components/basic/ComponentWrapper.js b/packages/web/src/components/basic/ComponentWrapper.js
index 38d732484c..46a6f633d4 100644
--- a/packages/web/src/components/basic/ComponentWrapper.js
+++ b/packages/web/src/components/basic/ComponentWrapper.js
@@ -37,6 +37,7 @@ class ComponentWrapper extends React.Component {
 
 	constructor(props, context) {
 		super(props, context);
+		this._timestamp = new Date().getTime();
 		// Register a component only when `destroyOnUnmount` is `true`
 		// or component is not present in store
 		let components = [];
@@ -102,9 +103,16 @@ class ComponentWrapper extends React.Component {
 		// Unregister components
 		const { componentId, destroyOnUnmount } = this.props;
 		if (destroyOnUnmount) {
-			this.props.removeComponent(componentId);
-			if (this.internalComponent) {
-				this.props.removeComponent(this.internalComponent);
+			let registeredComponentsTimestamps = {};
+			if (this.context && this.context.getState) {
+				({ registeredComponentsTimestamps } = this.context.getState());
+			}
+			// Unregister components
+			if (registeredComponentsTimestamps[componentId] === this.$timestamp) {
+				this.props.removeComponent(componentId);
+				if (this.internalComponent) {
+					this.props.removeComponent(this.internalComponent);
+				}
 			}
 		}
 	}
@@ -155,6 +163,7 @@ ComponentWrapper.propTypes = {
 
 ComponentWrapper.defaultProps = {
 	setReact: true,
+	destroyOnUnmount: true,
 };
 
 const mapDispatchToProps = (dispatch, ownProps) => ({