I am using React Places Autocomplete to generate location suggestions. I want to force user to select one of the suggested locations, so I am trying to detect the clicks outside the elements generated here:

我正在使用React Places Autocomplete来生成位置建议。我想强制用户选择一个建议的位置，所以我试图检测在这里生成的元素之外的点击：

<div ref={suggestionsContainerRef}>
              {suggestions.map(suggestion => {
                const className = suggestion.active ? 'suggestion-item--active' : 'suggestion-item';
                // inline style for demonstration purpose
                const style = suggestion.active
                            ? { backgroundColor: '#fafafa', cursor: 'pointer' }
                            : { backgroundColor: '#ffffff', cursor: 'pointer' };
                return (
                  <div {...getSuggestionItemProps(suggestion, { className, style })}  >
                    <span >{suggestion.description}</span>
                  </div>
                )
              })}
            </div>
   

This is not working as expected. Even I click on one of the span elements generated, it considers the click outside of the div. Any help?

这并没有像预期的那样奏效。即使我单击生成的SPAN元素之一，它也会认为是在div之外的单击。有什么帮助吗？

Full Code:

完整代码：

type LocationInputProps = {
    id: string
    label: string
    placeholder: string
}

const LocationInput = ({id, label, placeholder}: LocationInputProps) => {

  const [address, setAddress] = useState<string>('');
  const [lat, setLat] = useState<number>();
  const [lon, setLon] = useState<number>();
  const [selectedAddress, setSelectedAddress] = useState(false);
  const suggestionsContainerRef = useRef<HTMLDivElement | null>(null);

  useEffect(() => {
    // Add a click event listener to the document to detect clicks outside the suggestions container
    document.addEventListener('click', handleDocumentClick);

    return () => {
      // Remove the click event listener when the component unmounts
      document.removeEventListener('click', handleDocumentClick);
    };
  }, []);

  const handleDocumentClick = (event: MouseEvent) => {
    // Check if the click target is not within the suggestions container
    if (
      suggestionsContainerRef.current &&
      !suggestionsContainerRef.current.contains(event.target as Node)
      
    ) {
        console.log('click is not within container')

        setAddress(''); // Clear the input value
          
    } 
  };

  return(
    <PlacesAutocomplete
        value={address}
        onChange={(address) => {setAddress(address)}}
        onSelect={(address) => {
          geocodeByAddress(address)
            .then(results => getLatLng(results[0]))
            .then(latLng => {console.log('Success', latLng)
        setLat(latLng.lat);
        setLon(latLng.lng);
        setSelectedAddress(true);
    })
            .catch(error => {console.error('Error', error)
        setSelectedAddress(false)});
       
          setAddress(address);
          
        }}
        searchOptions={{componentRestrictions: {country: 'US'}}}
      >
        {({ getInputProps, suggestions, getSuggestionItemProps }) => (
          <div>
          
              <div className="grid w-9/12 items-center gap-1.5">
      <Label>{label}</Label>
      <Input  id={id} placeholder={placeholder} {...getInputProps({
                className: 'location-search-input'
              })}/>
    </div>
    
            <div ref={suggestionsContainerRef}>
              {suggestions.map(suggestion => {
                const className = suggestion.active ? 'suggestion-item--active' : 'suggestion-item';
                // inline style for demonstration purpose
                const style = suggestion.active
                            ? { backgroundColor: '#fafafa', cursor: 'pointer' }
                            : { backgroundColor: '#ffffff', cursor: 'pointer' };
                return (
                  <div {...getSuggestionItemProps(suggestion, { className, style })}  >
                    <span >{suggestion.description}</span>
                  </div>
                )
              })}
            </div>
          </div>
        )}
      </PlacesAutocomplete>
  )
}

export default LocationInput

One of the simplest way to detect outside click is by using onBlur event on the element on which you want to detect outside click.

检测外部单击的最简单方法之一是在要检测外部单击的元素上使用onBlur事件。