ErrorPro / react-google-autocomplete

React components for google places API.
MIT License
462 stars 114 forks source link

RefObject<null>.current: any - Cannot assign to 'current' because it is a read-only property.ts(2540) #207

Open m3c-ode opened 1 year ago

m3c-ode commented 1 year ago

Hi there,

First, thank you for putting this package together!

I've been trying to use it with AntD, and I get an issue with TS here. In my example:

import { usePlacesWidget } from 'react-google-autocomplete';

function CreateAddressFields({ form }: Props) {
    const inputRef = useRef<any>(null);
    const options = {
        componentRestrictions: { country: ["ca", "us"] },
        fields: ["address_components", "geometry", "icon", "name"],
        types: ["address"]
    };

    const { ref, autocompleteRef } = usePlacesWidget({
        apiKey: PLACES_API_KEY,
        onPlaceSelected: (place, inputRef, something) => {
            console.log('place selected', place);
            const address = place.address_components;
        },
        options
    });

[...]

    return (
....
            <Form.Item
                label="Street Info 1:"
                name="street1"
                rules={[{ required: true, message: 'Please input your street1!' }]}>
                <Input
                    placeholder='Start typing for autofill...'
                    ref={(c) => {
                        inputRef.current = c;
       //Error here 
                        if (c) ref.current = c.input;
                    }}
                // ref={inputRef}
                />
            </Form.Item>
...

I get this TS error mentioned in the title.

I have tried changing the readonly prop, and making sure null was also included in the type, but I am unable to fix this.

Any suggestions?