Place selection not working with mouse click on radix ui dialog component

[harshil-getrevscale]

trafficstars

Issue Description: When using the ReactGoogleAutocomplete component inside a Radix UI dialog, the place selection works fine when navigating with the keyboard and pressing "Enter". However, when trying to select a place using a mouse click, the dropdown closes without selecting the place, and the input remains unchanged.

Steps to Reproduce:

1. Integrate the ReactGoogleAutocomplete component inside a Radix UI dialog.
2. Open the dialog and start typing in the autocomplete input.
3. Use the mouse to click on one of the suggested places from the dropdown.

Expected Behavior: The selected place should populate the input field when clicked with the mouse.

Actual Behavior: Clicking on a place in the dropdown does not populate the input field. Instead, the dropdown closes, and the input field remains unchanged.

Additional Information: The issue seems to stem from the fact that the Radix UI dialog and the autocomplete dropdown are rendered outside of the main div, causing conflicts in handling the click events. Placing the ReactGoogleAutocomplete component outside of the Radix UI dialog works as expected.

Environment: @radix-ui/react-dialog: "^1.0.4", react-google-autocomplete: "^2.7.3", Browser: Chrome, OS: Ubuntu 22.04.3 LTS

[glassworks-projects]

+1

[arsantiagolopez]

This happens because the suggestion box is rendered outside of the dialog. So when a click event occurs on the suggestion box, the dialog thinks you're clicking outside of it.

The way I fixed it was preventing Radix's dialog from closing when interacting outside of the modal:

<DialogContent
  onInteractOutside={(event) => event.preventDefault()}
  ...

This prevents the dialog from closing, you then may want to target the overlay and reset the "close on click" behaviour, to mimic the default dialog behaviour.

Good luck 💪

[stefano-vergani]

Hi, maybe i found a work around, on location picker i add this useEffect

useEffect(() => {
        const handlePacContainer = () => {
            const containers = document.querySelectorAll('.pac-container');
            containers.forEach((container) => {
                const el = container as HTMLElement;

                // Set high z-index to ensure visibility
                el.style.zIndex = '9999';
                el.style.pointerEvents = 'auto';

                // Add data attribute to identify as autocomplete dropdown
                el.setAttribute('data-radix-popper-content-wrapper', '');
                el.setAttribute('data-autocomplete-dropdown', 'true');

                // Prevent all mouse events from bubbling up
                const preventBubbling = (e: Event) => {
                    e.stopPropagation();
                    e.stopImmediatePropagation();
                };

                // Remove existing listeners to avoid duplicates
                el.removeEventListener('mousedown', preventBubbling);
                el.removeEventListener('mouseup', preventBubbling);
                el.removeEventListener('click', preventBubbling);

                // Add event listeners to prevent bubbling
                el.addEventListener('mousedown', preventBubbling, true);
                el.addEventListener('mouseup', preventBubbling, true);
                el.addEventListener('click', preventBubbling, true);
            });
        };

On my DialogContent

<DialogContent
                onInteractOutside={(e) => {
                    // Prevent dialog from closing when interacting with Google autocomplete dropdown
                    const target = e.target as Element;
                    if (
                        target?.closest('.pac-container') ||
                        target?.hasAttribute('data-autocomplete-dropdown') ||
                        target?.closest('[data-autocomplete-dropdown="true"]')
                    ) {
                        e.preventDefault();
                    }
                }}
            >
...
</DialogContent>

Hope this helps.

[jon-w1]

See my other comment for another solution if these are not working for you.

.pac-container{
  pointer-events: all;
}

https://github.com/ErrorPro/react-google-autocomplete/issues/224#issuecomment-3482762758