Merge branch 'master' into dependabot/npm_and_yarn/ua-parser-js-0.7.33

Author: ErrorPro

README.md

@@ -23,10 +23,10 @@ or
 
 <hr>
 
-As of version 1.2.4, you can now pass an `apiKey` prop to automatically load the Google maps scripts. The api key can be found in your [google cloud console.](https://developers.google.com/maps/documentation/javascript/get-api-key)
+As of version 1.2.4, you can now pass an `apiKey` prop to automatically load the Google maps scripts. The api key can be found in your [google cloud console.](https://developers.google.com/maps/documentation/javascript/get-api-key). The places service hook requires both the Places API and Maps Javascript API to be enabled.
 
 ```js
-<AutoComplete
+<Autocomplete
   apiKey={YOUR_GOOGLE_MAPS_API_KEY}
   onPlaceSelected={(place) => console.log(place)}
 />

lib/usePlacesWidget.js

@@ -52,7 +52,6 @@ function usePlacesWidget(props) {
   var inputRef = (0, _react.useRef)(null);
   var event = (0, _react.useRef)(null);
   var autocompleteRef = (0, _react.useRef)(null);
-  var observerHack = (0, _react.useRef)(null);
   var languageQueryParam = language ? "&language=".concat(language) : "";
   var googleMapsScriptUrl = "".concat(googleMapsScriptBaseUrl, "?libraries=").concat(libraries, "&key=").concat(apiKey).concat(languageQueryParam);
   var handleLoadScript = (0, _react.useCallback)(function () {
@@ -77,7 +76,7 @@ function usePlacesWidget(props) {
 
       if (typeof google === "undefined") return console.error("Google has not been found. Make sure your provide apiKey prop.");
       if (!((_google$maps = google.maps) !== null && _google$maps !== void 0 && _google$maps.places)) return console.error("Google maps places API must be loaded.");
-      if (!inputRef.current instanceof HTMLInputElement) return console.error("Input ref must be HTMLInputElement.");
+      if (!(inputRef.current instanceof HTMLInputElement)) return console.error("Input ref must be HTMLInputElement.");
       autocompleteRef.current = new google.maps.places.Autocomplete(inputRef.current, config);
 
       if (autocompleteRef.current) {
@@ -100,24 +99,38 @@ function usePlacesWidget(props) {
     return function () {
       return event.current ? event.current.remove() : undefined;
     };
-  }, []); // Autofill workaround adapted from https://stackoverflow.com/questions/29931712/chrome-autofill-covers-autocomplete-for-google-maps-api-v3/49161445#49161445
-
+  }, []);
   (0, _react.useEffect)(function () {
-    var _React$version;
+    if (autocompleteRef.current && onPlaceSelected) {
+      event.current = autocompleteRef.current.addListener("place_changed", function () {
+        if (onPlaceSelected && autocompleteRef && autocompleteRef.current) {
+          onPlaceSelected(autocompleteRef.current.getPlace(), inputRef.current, autocompleteRef.current);
+        }
+      });
+    }
 
+    return function () {
+      return event.current ? event.current.remove() : undefined;
+    };
+  }, [onPlaceSelected]); // Autofill workaround adapted from https://stackoverflow.com/questions/29931712/chrome-autofill-covers-autocomplete-for-google-maps-api-v3/49161445#49161445
+
+  (0, _react.useEffect)(function () {
     // TODO find out why react 18(strict mode) hangs the page loading
-    if (!(_react.default !== null && _react.default !== void 0 && (_React$version = _react.default.version) !== null && _React$version !== void 0 && _React$version.startsWith("18")) && _utils.isBrowser && window.MutationObserver && inputRef.current && inputRef.current instanceof HTMLInputElement) {
-      observerHack.current = new MutationObserver(function () {
-        observerHack.current.disconnect();
+    if (_utils.isBrowser && window.MutationObserver && inputRef.current && inputRef.current instanceof HTMLInputElement) {
+      var observerHack = new MutationObserver(function () {
+        observerHack.disconnect();
 
         if (inputRef.current) {
           inputRef.current.autocomplete = inputAutocompleteValue;
         }
       });
-      observerHack.current.observe(inputRef.current, {
+      observerHack.observe(inputRef.current, {
         attributes: true,
         attributeFilter: ["autocomplete"]
       });
+      return function () {
+        observerHack.disconnect(); // Cleanup
+      };
     }
   }, [inputAutocompleteValue]);
   (0, _react.useEffect)(function () {

lib/utils.js

@@ -27,13 +27,13 @@ var loadGoogleMapScript = function loadGoogleMapScript(googleMapsScriptBaseUrl,
     });
   }
 
+  var scriptUrl = new URL(googleMapsScriptUrl);
+  scriptUrl.searchParams.set("callback", "__REACT_GOOGLE_AUTOCOMPLETE_CALLBACK__");
   var el = document.createElement("script");
-  el.src = googleMapsScriptUrl;
-  document.body.appendChild(el);
+  el.src = scriptUrl.toString();
   return new Promise(function (resolve) {
-    el.addEventListener("load", function () {
-      return resolve();
-    });
+    window.__REACT_GOOGLE_AUTOCOMPLETE_CALLBACK__ = resolve;
+    document.body.appendChild(el);
   });
 };
 

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "react-google-autocomplete",
-  "version": "2.7.2",
+  "version": "2.7.4",
   "description": "React component for google autocomplete.",
   "main": "index.js",
   "types": "index.d.ts",

package.json

@@ -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}`;
 
@@ -62,16 +61,16 @@ export default function usePlacesWidget(props) {
       if (!google.maps?.places)
         return console.error("Google maps places API must be loaded.");
 
-      if (!inputRef.current instanceof HTMLInputElement)
+      if (!(inputRef.current instanceof HTMLInputElement))
         return console.error("Input ref must be HTMLInputElement.");
 
       autocompleteRef.current = new google.maps.places.Autocomplete(
         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) {
@@ -95,27 +94,41 @@ export default function usePlacesWidget(props) {
     return () => (event.current ? event.current.remove() : undefined);
   }, []);
 
+  useEffect(() => {
+    if (autocompleteRef.current && onPlaceSelected) {
+      event.current = autocompleteRef.current.addListener("place_changed", function () {
+        if (onPlaceSelected && autocompleteRef && autocompleteRef.current) {
+          onPlaceSelected(autocompleteRef.current.getPlace(), inputRef.current, autocompleteRef.current);
+        }
+      });
+    }
+    return () => (event.current ? event.current.remove() : undefined);
+  }, [onPlaceSelected]);
+
   // Autofill workaround adapted from https://stackoverflow.com/questions/29931712/chrome-autofill-covers-autocomplete-for-google-maps-api-v3/49161445#49161445
   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]);
 

src/usePlacesWidget.js

@@ -24,12 +24,16 @@ export const loadGoogleMapScript = (
     });
   }
 
+  let scriptUrl = new URL(googleMapsScriptUrl);
+  scriptUrl.searchParams.set(
+    "callback",
+    "__REACT_GOOGLE_AUTOCOMPLETE_CALLBACK__"
+  );
   const el = document.createElement("script");
-  el.src = googleMapsScriptUrl;
-
-  document.body.appendChild(el);
+  el.src = scriptUrl.toString();
 
   return new Promise((resolve) => {
-    el.addEventListener("load", () => resolve());
+    window.__REACT_GOOGLE_AUTOCOMPLETE_CALLBACK__ = resolve;
+    document.body.appendChild(el);
   });
 };