ErrorPro / react-google-autocomplete

React components for google places API.
MIT License
476 stars 113 forks source link

usePlacesWidget with conditional rendering #122

Closed ju2kr closed 3 years ago

ju2kr commented 3 years ago

Hi all, I'm struggling with a problem since a few days. I would like to use the usePlacesWidget hook with an input field, which is only rendered under certain conditions. As soon as the field is not rendered it logically does not find the reference. If the field is rendered it finds the reference but the autocompletion does not work.

Bildschirmfoto 2021-07-27 um 08 35 31

When the input field is rendered on initial page rendering everything works as expected.

Bildschirmfoto 2021-07-27 um 08 37 24
ErrorPro commented 3 years ago

@ju2kr Hey! I think the easiest way to solve this is to hide inputs with css. Don't unmount them, just change display:none|block. If that's not possible for you then you can switch to use <Autocomplete /> with ref. Store the ref inside the parent component and it'll work even if you unmount the <Autocomplete ref={ref} />