[Feat] Autocomplete options cannot be selected by clicking

[Yedidya10]

Target Use Case

I'm posting the case as a feature, but it's basically a bug - just not in this library, but in the Google component itself, and I hope you can implement a solution for this.

I'm trying to display the "Autocomplete" component on a dialog with the ready-made shadcn ui component:

import * as DialogPrimitive from "@radix-ui/react-dialog"

function Dialog({
...props
}: React.ComponentProps<typeof DialogPrimitive.Root>) {
return <DialogPrimitive.Root data-slot="dialog" {...props} />
}

But a problem arises that after the window opens, the name suggestion menu cannot be selected by clicking the mouse, but only by navigating with arrows and the Enter key.

I tried first directly with the Google API and then with your example component, but it doesn't help because the problem lies in the fact that Google inserts the element in the body and this creates conflicts with the dialog.

I hope you can address this case, Thank you.

Proposal

Not relevant.

[viktordanko]

Check https://github.com/radix-ui/primitives/issues/1859#issuecomment-1771356816

or

// AddressAutoCompleteInput.tsx
useEffect(() => {
    setTimeout(() => {
      document.body.style.pointerEvents = ''
    }, 0)
  }, [])

const currentInput = inputRef.current

...
<DialogPrimitive.Content
        data-slot="dialog-content"
        className={cn(
          'data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 pointer-events-auto fixed inset-0 z-50 flex h-full w-full flex-col gap-4 overflow-y-auto bg-white p-6 duration-200 sm:top-[50%] sm:left-[50%] sm:h-fit sm:max-h-[calc(100vh-2rem)] sm:max-w-[calc(100%-2rem)] sm:max-w-lg sm:translate-x-[-50%] sm:translate-y-[-50%] sm:rounded-lg sm:border sm:shadow-lg',
          className,
        )}
        onInteractOutside={(e) => { // <-- this 
          // Allow clicks on Google Maps autocomplete
          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()
          }
        }}
        {...props}
      >
...