Skip to content

Commit d9aa89e

Browse files
galin-georgievGalin Georgiev
andauthored
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>
1 parent fde0eec commit d9aa89e

File tree

3 files changed

+13
-11
lines changed

3 files changed

+13
-11
lines changed

package-lock.json

Lines changed: 2 additions & 2 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "react-google-autocomplete",
3-
"version": "2.7.3",
3+
"version": "2.7.4",
44
"description": "React component for google autocomplete.",
55
"main": "index.js",
66
"types": "index.d.ts",

src/usePlacesWidget.js

Lines changed: 10 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,6 @@ export default function usePlacesWidget(props) {
2828
const inputRef = useRef(null);
2929
const event = useRef(null);
3030
const autocompleteRef = useRef(null);
31-
const observerHack = useRef(null);
3231
const languageQueryParam = language ? `&language=${language}` : "";
3332
const googleMapsScriptUrl = `${googleMapsScriptBaseUrl}?libraries=${libraries}&key=${apiKey}${languageQueryParam}`;
3433

@@ -69,9 +68,9 @@ export default function usePlacesWidget(props) {
6968
inputRef.current,
7069
config
7170
);
72-
73-
if(autocompleteRef.current) {
74-
event.current = autocompleteRef.current.addListener(
71+
72+
if (autocompleteRef.current) {
73+
event.current = autocompleteRef.current.addListener(
7574
"place_changed",
7675
() => {
7776
if (onPlaceSelected && autocompleteRef && autocompleteRef.current) {
@@ -99,23 +98,26 @@ export default function usePlacesWidget(props) {
9998
useEffect(() => {
10099
// TODO find out why react 18(strict mode) hangs the page loading
101100
if (
102-
!React?.version?.startsWith("18") &&
103101
isBrowser &&
104102
window.MutationObserver &&
105103
inputRef.current &&
106104
inputRef.current instanceof HTMLInputElement
107105
) {
108-
observerHack.current = new MutationObserver(() => {
109-
observerHack.current.disconnect();
106+
const observerHack = new MutationObserver(() => {
107+
observerHack.disconnect();
110108

111109
if (inputRef.current) {
112110
inputRef.current.autocomplete = inputAutocompleteValue;
113111
}
114112
});
115-
observerHack.current.observe(inputRef.current, {
113+
observerHack.observe(inputRef.current, {
116114
attributes: true,
117115
attributeFilter: ["autocomplete"],
118116
});
117+
118+
return () => {
119+
observerHack.disconnect(); // Cleanup
120+
};
119121
}
120122
}, [inputAutocompleteValue]);
121123

0 commit comments

Comments
 (0)