Skip to content

isMulti Prop Does Not Accept true in react-google-places-autocomplete v4.0.1 #339

@venigallapraveen

Description

@venigallapraveen

Environment

  • react-google-places-autocomplete version: 4.0.1

Description

Attempting to use the isMulti prop with a value of true results in a TypeScript error, suggesting the type is not assignable. This limits the component usage to only single selections, whereas multiple selections are necessary for my use case.

Error Message

Type 'true' is not assignable to type 'false'.ts(2322)

Steps to Reproduce

Here's a sample code snippet demonstrating the issue:

import AutoComplete from 'react-google-places-autocomplete';
import { SingleValue, ActionMeta } from 'react-select';

import { GeocodeResult } from './interfaces';
import { REACT_APP_GOOGLE_API_KEY } from '../../utils/constants';

interface AutoCompleteInputProps<IsMulti extends boolean = boolean> {
  isMulti?: IsMulti;
  value?: IsMulti extends true ? GeocodeResult[] : GeocodeResult;
  onChange: (newValue: SingleValue<GeocodeResult> | GeocodeResult[], actionMeta: ActionMeta<GeocodeResult>) => void;
}

const Index = ({ isMulti = false, value, onChange }: AutoCompleteInputProps): JSX.Element => (
  <AutoComplete
    apiKey={REACT_APP_GOOGLE_API_KEY}
    selectProps={{
      isMulti,
      value: value || undefined,
      onChange,
      placeholder: 'Start typing the address...',
    }}
    autocompletionRequest={{
      bounds: [
        { lat: 50, lng: 50 },
        { lat: 100, lng: 100 },
      ],
      componentRestrictions: {
        country: ['ca', 'us'],
      },
    }}
  />
);

export default Index;

When setting isMulti to true in selectProps, TypeScript flags the above error.

Expected Behavior

The isMulti prop should allow for a true value to enable multiple selections.

Actual Behavior

TypeScript error is thrown when isMulti is set to true.

Possible Solution

Adjust typings to allow isMulti to be true to support multiple selections.

I would appreciate any guidance on whether this is a known issue or if there is an alternative recommended approach for enabling multiple selections.

Thank you!

Metadata

Metadata

Assignees

No one assigned

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions