List of result autocomplete google maps API can't be selected in Sheet Component

[tegarmonster]

Hi,
I'm using component Sheet, and add google maps component to SheetContent.. the google component is work, but when I want to select the result of autocomplete, the list cannot be selected

this is because CSS on Sheet component?

[lucasprins]

Why are you using sheet for this? Seems like a combobox could be good for this

https://ui.shadcn.com/docs/components/combobox

Anyway, could you make a code sandbox so we can reproduce and see?

[tegarmonster]

Hi @lucasprins
I mean I'm using Sheet like this:

<Sheet>
  <MapComponent />
</Sheet>

[kaydenthomson]

@tegarmonster did you find a work around for this?

I'm having the same problem with the Dialog component.

This is a similar issue: #2155
And here is an issue on Radix #1859

[kaydenthomson]

Ben's comment fixed the issue for me. I tested both Dialogs and Sheets and made some minor modifications.

I have an AutocompleteInput component where I added:

useEffect(() => {
  setTimeout(() => (document.body.style.pointerEvents = ""), 0)
}, []) 

Then on SheetContent or DialogContent components, I add the the property onInteractOutside.

onInteractOutside={(e) => {
  const hasPacContainer = e.composedPath().some((el: EventTarget) => {
    if ("classList" in el) {
      return Array.from((el as Element).classList).includes("pac-container")
    }
    return false
  })

  if (hasPacContainer) {
    e.preventDefault()
  }
}}

[shadcn]

This issue has been automatically closed because it received no activity for a while. If you think it was closed by accident, please leave a comment. Thank you.

[dertuman]

For other people that have come here because of the same issue but in the shadcn Drawer (which uses radix under the hood), nothing else worked to me other than using this, so basically thanks so much to the original poster which I believe is Ben radix-ui/primitives#1859 (comment), this just targets the item instead of the container. And no need to use modal={false}.

<DrawerContent
        onInteractOutside={(e) => {
          const hasPacItem = e.composedPath().some((el: EventTarget) => {
            if ('classList' in el) {
              return Array.from((el as Element).classList).includes('pac-item');
            }
            return false;
          });

          // if we click an autocomplete item, prevent the default onInteractOutside action, to close
          if (hasPacItem) {
            e.preventDefault();
          }
        }}
      >

and in the autocomplete component, to allow the click to go through to the autocomplete items (again thanks to the original poster):

// this is needed to allow pointer events to go through, used to fix the google autocomplete input
  useEffect(() => {
    setTimeout(() => (document.body.style.pointerEvents = ''), 0);
  }, []);

[tegarmonster]

thanks @kaydenthomson and @dertuman !

[ld-gary]

+1 for @kaydenthomson / @dertuman solution. My head was scratched!

[ricardocoronel]

Thanks @kaydenthomson / @dertuman your solution works perfect!

In my case I'm using the StandaloneSearchBox component from @react-google-maps/api.
I created a GoogleMapComponent and inside I added
useEffect(() => { setTimeout(() => (document.body.style.pointerEvents = ""), 0); }, []);

And then in mi component I added
<DialogContent onInteractOutside={(e) => { const hasPacContainer = e .composedPath() .some((el: EventTarget) => { if ("classList" in el) { return Array.from((el as Element).classList).includes( "pac-container" ); } return false; }); if (hasPacContainer) { e.preventDefault(); } }} >

And now it's working perfect! I waste a lot of time looking for fix it before I red your messages.

[dertuman]

Thanks @kaydenthomson / @dertuman your solution works perfect!

In my case I'm using the component from @react-google-maps/api.
I created a GoogleMapComponent and inside I added
useEffect(() => { setTimeout(() => (document.body.style.pointerEvents = ""), 0); }, []);

And then in mi component I added
<DialogContent onInteractOutside={(e) => { const hasPacContainer = e .composedPath() .some((el: EventTarget) => { if ("classList" in el) { return Array.from((el as Element).classList).includes( "pac-container" ); } return false; }); if (hasPacContainer) { e.preventDefault(); } }} >

And now it's working perfect! I waste a lot of time looking for fix it before I red your messages.

Hey Ricardo thanks for the kind message, very appreciated and glad this helped!