Clear Suggestions when a user clicks away.

[vidur149]

import React from "react";
import PlacesAutocomplete from "react-places-autocomplete";
import Input from "@material-ui/core/Input";
import FormHelperText from "@material-ui/core/FormHelperText";
import ListItem from "@material-ui/core/ListItem";
import Typography from "@material-ui/core/Typography";
import InputLabel from "@material-ui/core/InputLabel";
import FormControl from "@material-ui/core/FormControl";
import { StyledList } from "./style";

class LocationSearchInput extends React.Component {
  render() {
    const {
      input: { value, onChange, name, onBlur },
      label,
      placeholder,
      meta: { error, touched }
    } = this.props;

    const searchOptions = {
      // location: new google.maps.LatLng(-34, 151),
      // radius: 2000,
      types: ["address"]
    };

    console.log(value);

    return (
      <PlacesAutocomplete
        value={value}
        onChange={value =>
          !value.address ? onChange(value) : onChange(value.address)
        }
        searchOptions={searchOptions}
        // onSelect={address => this.handleSelect(address, onChange)}
      >
        {({ getInputProps, suggestions, getSuggestionItemProps, loading }) => {
          return (
            <FormControl
              fullWidth={true}
              error={error && touched ? true : false}
            >
              <InputLabel htmlFor="google-autocomplete">{label}</InputLabel>
              <Input
                id="google-autocomplete"
                aria-describedby="google-autocomplete-helper-text"
                label={label}
                fullWidth
                autoComplete={name}
                placeholder={placeholder}
                {...getInputProps({
                  placeholder: placeholder
                })}
                error={touched && error ? true : false}
                onBlur={onBlur}
              />
              {error && touched && (
                <FormHelperText id="google-autocomplete-helper-text" error>
                  {error}
                </FormHelperText>
              )}
              {suggestions.length > 0 && (
                <StyledList
                  style={{ position: "fixed", zIndex: 1 }}
                  className="autocomplete-dropdown-container"
                >
                  {loading && <div>Loading...</div>}
                  {suggestions.map(suggestion => {
                    const className = suggestion.active
                      ? "suggestion-item--active"
                      : "suggestion-item";
                    // inline style for demonstration purpose
                    const style = suggestion.active
                      ? {
                          backgroundColor: "rgba(0, 0, 0, 0.08)",
                          cursor: "pointer"
                        }
                      : { backgroundColor: "#ffffff", cursor: "pointer" };
                    return (
                      <ListItem
                        {...getSuggestionItemProps(suggestion, {
                          className,
                          style
                        })}
                        value={suggestion}
                      >
                        <Typography>{suggestion.description}</Typography>
                      </ListItem>
                    );
                  })}
                </StyledList>
              )}
            </FormControl>
          );
        }}
      </PlacesAutocomplete>
    );
  }
}

export default LocationSearchInput;

[dannyblv]

hey @vidur149, I'm not sure if it's a question or statement 😕

anyway if you are trying to prevent the clear of suggestions on "click away" you can override handleInputOnBlur() or clearSuggestions() it mostly depends on the needs, good luck ✌️

[ray-su]

hey @vidur149, I'm not sure if it's a question or statement 😕

anyway if you are trying to prevent the clear of suggestions on "click away" you can override handleInputOnBlur() or clearSuggestions() it mostly depends on the needs, good luck ✌️

hey Danny. How can I override handleInputOnBlur() or clearSuggestions() without modifying the library itself? I'm trying to prevent clear of suggestions.

Thanks

[dannyblv]

@ray-su,

  <PlacesAutocomplete
    ref={refObj => {
      refObj.clearSuggestions = () => {};
      refObj.handleInputOnBlur = () => {};
    }
  >

i'd prefer to use react.createRef() and not to do it in the element itself, but thats individual :)

[jmayergit]

@ray-su,

  <PlacesAutocomplete
    ref={refObj => {
      refObj.clearSuggestions = () => {};
      refObj.handleInputOnBlur = () => {};
    }
  >

i'd prefer to use react.createRef() and not to do it in the element itself, but thats individual :)

I don't understand what you did here so I'll ask how do you do it on the element itself

[vidur149]

Hey,

I have solved the problem by using elementRef. Sorry, didnt get a chance to reply. Thank you guys for your help and support.

Regards, Vidur Singla Mob: +91-9873843939

On Thu, Aug 22, 2019 at 12:50 AM Julien Mayer [email protected] wrote:

@ray-su https://github.com/ray-su,

<PlacesAutocomplete ref={refObj => { refObj.clearSuggestions = () => {}; refObj.handleInputOnBlur = () => {}; }

i'd prefer to use react.createRef() and not to do it in the element itself, but thats individual :)

I don't understand what you did here so I'll ask how do you do it on the element itself

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/hibiken/react-places-autocomplete/issues/260?email_source=notifications&email_token=ADFP2GNT6WGBGZLLAAIYBLDQFWIQVA5CNFSM4G3JQBT2YY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOD4223ZQ#issuecomment-523611622, or mute the thread https://github.com/notifications/unsubscribe-auth/ADFP2GND2T6DF5OCDMA3EY3QFWIQVANCNFSM4G3JQBTQ .

[jmayergit]

After digging around I found this example from this article which discusses way to customize 3rd party react components. And the react docs for callback refs.

I wanted to modify the behavior of handleInputOnBlur similar to what others have done. Here is my abbreviated code,

import React, { Component } from 'react';
import PlacesAutocomplete from 'react-places-autocomplete';

class SearchBar extends Component {
  placesRef = null;

  componentDidMount() {
    this.modifyInputBlur();
  }

  setPlacesRef = (element) => {
    this.placesRef = element;
  }

   modifyInputBlur = () => {
    let original = this.placesRef.handleInputOnBlur;
    this.placesRef.handleInputOnBlur = () => {
      if(document.hasFocus()) {
        original();
      }
    };
  }

   render() {
    return (
        <PlacesAutocomplete

          ref={this.setPlacesRef}
        >