From d9aa89edfbc6129ef3c4505b46830565e6c50539 Mon Sep 17 00:00:00 2001
From: galin-georgiev <40629883+galin-georgiev@users.noreply.github.com>
Date: Thu, 16 Jan 2025 17:06:09 +0200
Subject: [PATCH] Fix issue 243 (#244)

* Fix issue #243: Prevent browser crash in strict mode (React 18 & 19).

* Bump the version - 2.7.4

---------

Co-authored-by: Galin Georgiev <galin.georgiev@sirma.int>
---
 package-lock.json      |  4 ++--
 package.json           |  2 +-
 src/usePlacesWidget.js | 18 ++++++++++--------
 3 files changed, 13 insertions(+), 11 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 87fd495..62a3325 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "react-google-autocomplete",
-  "version": "2.7.2",
+  "version": "2.7.4",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "react-google-autocomplete",
-      "version": "2.7.2",
+      "version": "2.7.4",
       "license": "ISC",
       "dependencies": {
         "lodash.debounce": "^4.0.8",
diff --git a/package.json b/package.json
index c4765f4..8d51bbe 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-google-autocomplete",
-  "version": "2.7.3",
+  "version": "2.7.4",
   "description": "React component for google autocomplete.",
   "main": "index.js",
   "types": "index.d.ts",
diff --git a/src/usePlacesWidget.js b/src/usePlacesWidget.js
index 09e6239..8a808fa 100644
--- a/src/usePlacesWidget.js
+++ b/src/usePlacesWidget.js
@@ -28,7 +28,6 @@ export default function usePlacesWidget(props) {
   const inputRef = useRef(null);
   const event = useRef(null);
   const autocompleteRef = useRef(null);
-  const observerHack = useRef(null);
   const languageQueryParam = language ? `&language=${language}` : "";
   const googleMapsScriptUrl = `${googleMapsScriptBaseUrl}?libraries=${libraries}&key=${apiKey}${languageQueryParam}`;
 
@@ -69,9 +68,9 @@ export default function usePlacesWidget(props) {
         inputRef.current,
         config
       );
-      
-      if(autocompleteRef.current) {
-         event.current = autocompleteRef.current.addListener(
+
+      if (autocompleteRef.current) {
+        event.current = autocompleteRef.current.addListener(
           "place_changed",
           () => {
             if (onPlaceSelected && autocompleteRef && autocompleteRef.current) {
@@ -99,23 +98,26 @@ export default function usePlacesWidget(props) {
   useEffect(() => {
     // TODO find out why react 18(strict mode) hangs the page loading
     if (
-      !React?.version?.startsWith("18") &&
       isBrowser &&
       window.MutationObserver &&
       inputRef.current &&
       inputRef.current instanceof HTMLInputElement
     ) {
-      observerHack.current = new MutationObserver(() => {
-        observerHack.current.disconnect();
+      const observerHack = new MutationObserver(() => {
+        observerHack.disconnect();
 
         if (inputRef.current) {
           inputRef.current.autocomplete = inputAutocompleteValue;
         }
       });
-      observerHack.current.observe(inputRef.current, {
+      observerHack.observe(inputRef.current, {
         attributes: true,
         attributeFilter: ["autocomplete"],
       });
+
+      return () => {
+        observerHack.disconnect(); // Cleanup
+      };
     }
   }, [inputAutocompleteValue]);