addegbenga
commented
1 year ago @rahul138 can share your use-case? that would help narrow where the issue is coming from. Someone might be able to help.
Open rahul138 opened 1 year ago
addegbenga
commented
1 year ago @rahul138 can share your use-case? that would help narrow where the issue is coming from. Someone might be able to help.
go-diego
commented
1 year ago @rahul138 Try making sure that selectProps.value.value isn't undefined
<GooglePlacesAutocomplete
autocompletionRequest={{
componentRestrictions: {
country: ["us"],
},
}}
minLengthAutocomplete={3}
apiKey={process.env.NEXT_PUBLIC_GOOGLE_API_KEY}
onLoadFailed={(error) =>
console.error("Could not inject Google script", error)
}
selectProps={{
components: {
IndicatorSeparator: undefined,
DropdownIndicator: undefined,
Control,
Option,
Menu,
ValueContainer,
},
placeholder: "",
value: {
// address shouldn't be undefined here. I can reproduce the error you describe if it is undefined
value: address || {},
label: addressLabel,
},
onChange: handleAddressChange,
isClearable: true,
pageSize: 3,
TextFieldProps: {
InputLabelProps: {
shrink: addressLabel === "" ? undefined : true,
},
},
}}
/>
Tintef
commented
1 year ago I found it weird that the value returned from google places API doesn't have a place_id, can you provide a repo to reproduce?
We are using this component and it is working fine but one of our use case we are getting error which breaks whole UI and reason seems to be null "place_id" from null value in
getOptionValue={({ value }) => value.place_id}Few snippet from error are as shown below. Let me know if there is a quick fix or any suggestion for me.
_index.es.js:38 Uncaught TypeError: Cannot read properties of null (reading 'place_id') at Object.getOptionValue (index.es.js:38:106900) at Ko (index.es.js:38:70387) at eval (index.es.js:38:70661) at Array.some ()
at er (index.es.js:38:70636)
at Jo (index.es.js:38:69653)
at eval (index.es.js:38:69933)
at Array.map ()
at Uo (index.es.js:38:69734)
at eval (index.es.js:38:92110)
getOptionValue @ index.es.js:38
Ko @ index.es.js:38
eval @ index.es.js:38
er @ index.es.js:38
Jo @ index.es.js:38
eval @ index.es.js:38
Uo @ index.es.js:38
eval @ index.es.js:38
value @ index.es.js:38
applyDerivedStateFromProps @ react-dom.development.js:12425
updateClassInstance @ react-dom.development.js:13035
updateClassComponent @ react-dom.development.js:17432
beginWork @ react-dom.development.js:19073
callCallback @ react-dom.development.js:3945
invokeGuardedCallbackDev @ react-dom.development.js:3994
invokeGuardedCallback @ react-dom.development.js:4056
beginWork$1 @ react-dom.development.js:23959
performUnitOfWork @ react-dom.development.js:22774
workLoopSync @ react-dom.development.js:22702
renderRootSync @ react-dom.development.js:22665
performSyncWorkOnRoot @ react-dom.development.js:22288
eval @ react-dom.development.js:11327
unstable_runWithPriority @ scheduler.development.js:468
runWithPriority$1 @ react-dom.development.js:11276
flushSyncCallbackQueueImpl @ react-dom.development.js:11322
flushSyncCallbackQueue @ react-dom.development.js:11309
scheduleUpdateOnFiber @ react-dom.development.js:21888
enqueueSetState @ react-dom.development.js:12467
Component.setState @ react.development.js:365
eval @ index.es.js:38
eval @ index.es.js:38
(anonymous) @ places_impl.js:62
(anonymous) @ places_impl.js:15
e @ places_impl.js:11
c @ common.js:160
(anonymous) @ AutocompletionService.GetPredictionsJson?1sabc&4sen-US&15e3&21m1&2e1&callback=xdc._r5mph3&key=AIzaSyDP4nU4OC_vImXqOSgLytA0-T9PWtzZBFo&token=118117:1
react-dom.development.js:20085 The above error occurred in the component:
Consider adding an error boundary to your tree to customize error handling behavior. Visit https://reactjs.org/link/error-boundaries to learn more about error boundaries. logCapturedError @ react-dom.development.js:20085 update.callback @ react-dom.development.js:20113 callCallback @ react-dom.development.js:12318 commitUpdateQueue @ react-dom.development.js:12339 commitLifeCycles @ react-dom.development.js:20731 commitLayoutEffects @ react-dom.development.js:23421 callCallback @ react-dom.development.js:3945 invokeGuardedCallbackDev @ react-dom.development.js:3994 invokeGuardedCallback @ react-dom.development.js:4056 commitRootImpl @ react-dom.development.js:23146 unstable_runWithPriority @ scheduler.development.js:468 runWithPriority$1 @ react-dom.development.js:11276 commitRoot @ react-dom.development.js:22985 performSyncWorkOnRoot @ react-dom.development.js:22324 eval @ react-dom.development.js:11327 unstable_runWithPriority @ scheduler.development.js:468 runWithPriority$1 @ react-dom.development.js:11276 flushSyncCallbackQueueImpl @ react-dom.development.js:11322 flushSyncCallbackQueue @ react-dom.development.js:11309 scheduleUpdateOnFiber @ react-dom.development.js:21888 enqueueSetState @ react-dom.development.js:12467 Component.setState @ react.development.js:365 eval @ index.es.js:38 eval @ index.es.js:38 (anonymous) @ places_impl.js:62 (anonymous) @ places_impl.js:15 e @ places_impl.js:11 c @ common.js:160 (anonymous) @ AutocompletionService.GetPredictionsJson?1sabc&4sen-US&15e3&21m1&2e1&callback=xdc._r5mph3&key=AIzaSyDP4nU4OC_vImXqOSgLytA0-T9PWtzZBFo&token=118117:1 react-dom.development.js:11340 Uncaught TypeError: Cannot read properties of null (reading 'placeid') at Object.getOptionValue (index.es.js:38:106900) at Ko (index.es.js:38:70387) at eval (index.es.js:38:70661) at Array.some ()
at er (index.es.js:38:70636)
at Jo (index.es.js:38:69653)
at eval (index.es.js:38:69933)
at Array.map ()
at Uo (index.es.js:38:69734)
at eval (index.es.js:38:92110)