@@ -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