Bug Report textInputProps does not take the initial input value

[Frontend-dev-sarah]

Describe the bug

GooglePlacesAutocomplete is used for a EditScreen. So I would like to display a defalut address value fetched from the server before editing to a new address. However, the initial value is not presented from the initial state value.

The problem comes from textInputProps, it's value and onChangeText properties, to be precise, you find the codes below (besides, for further debug, I also tried My EditScreen Formik by passsing value and onChangeText in textInputProps, the bug is: Maximum update depth exeeded, so I think it's still the problem of textInputProps)

  const [myAddress, setMyAddress] = useState(user.address);
<GooglePlacesAutocomplete
              query={{
                key: Constants?.expoConfig?.extra?.GOOGLE_PLACES_API_KEY,
                language: I18n.locale,
              }}
              onPress={(data) => setMyAddress(data.description)}
              fetchDetails={true}
              textInputProps={{
                value: myAddress,
                onChangeText: (value) => {
                  setMyAddress(value);
                },
                placeholderTextColor: Colors.grey,
              }}
              enablePoweredByContainer={false}
/>

Additional context

• I am using expo, bare workflow (but I also tried with pure React Native project, the same bug)
• Library Version: [2.5.6]
• Expo: [49.0.13]
• React Native Version: [0.72.5]

[SavannahHowell]

I am having the same issue with an Expo project.

• This library: ^2.4.1
• Expo: ~48.0.18
• React Native: 0.71.13

[pawan-loc]

I'm still facing same issue, any soultion?

code :-

` textInputProps={{ onChangeText: (text) => { this.setState({ locSlctd: text, locCordinates: "" }, () => { this.props.onLocSlctd(null) }) },

[Frontend-dev-sarah]

For the moment, we don't have a solid solution enless the package team themselves fix it. So for my own temperary solution. I just not use onChangeText and value properties for textInputProps. To present a default value fetched from the server, I simply used a {value} to replace if it's for editing, it's not clean but at least solved my UI problem. The detail partial codes are as below: `<> {value ? (

{props?.label || I18n.t('inscription.address')}

  ) : null}
  {props.modify && showInitialAddress && (
    <View
      style={{
        flexDirection: 'row',
        alignItems: 'center',
      }}
    >
      <Text style={{ color: Colors.grey, marginLeft: 15, marginTop: 5 }}>
        {value}
      </Text>
      <IconButton
        icon='pencil'
        size={18}
        iconColor={Colors.grey60}
        onPress={() => setShowIniticalAddress(false)}
      />
    </View>
  )}
  {(!showInitialAddress || !props.modify) && (
    <GooglePlacesAutocomplete
      placeholder={props?.label || I18n.t('inscription.address')}
      query={{
        key: Constants?.expoConfig?.extra?.GOOGLE_PLACES_API_KEY,
        language: I18n.locale, // language of the results
      }}
      onPress={(data, details) => onSelectAddress(details)}
      fetchDetails={true}
      textInputProps={{
        placeholderTextColor: Colors.grey60,
        disabled: isSubmitting,
        onFocus: helpers.setTouched,
      }}
      enablePoweredByContainer={false}
      styles={{
        container: {
          flex: 0,
          borderBottomWidth: 1,
          borderBottomColor: Colors.grey25,
        },
        textInput: {
          backgroundColor: Colors.transparent,
          color: Colors.grey,
        },
      }}
    />
  )}

</> `

[BhargavaAS]

I found the solution for this issue. In GooglePlacesAutoComplete.js file inside node-modules change like below

useEffect(() => { // This will load the search results after the query object ref gets changed _handleChangeText(stateText); return () => { _abortRequests(); }; // eslint-disable-next-line react-hooks/exhaustive-deps }, [props.query]); --> remove props.query from here

Dependency array should be empty in this useeffect. Then defalut address value can be displayed which is fetched from the server

useEffect(() => { // This will load the search results after the query object ref gets changed _handleChangeText(stateText); return () => { _abortRequests(); }; // eslint-disable-next-line react-hooks/exhaustive-deps }, []);

[BhargavaAS]

@FaridSafi can you do the above changes in the project?

[Frontend-dev-sarah]

I found the solution for this issue. In GooglePlacesAutoComplete.js file inside node-modules change like below

useEffect(() => { // This will load the search results after the query object ref gets changed _handleChangeText(stateText); return () => { _abortRequests(); }; // eslint-disable-next-line react-hooks/exhaustive-deps }, [props.query]); --> remove props.query from here

Dependency array should be empty in this useeffect. Then defalut address value can be displayed which is fetched from the server

useEffect(() => { // This will load the search results after the query object ref gets changed _handleChangeText(stateText); return () => { _abortRequests(); }; // eslint-disable-next-line react-hooks/exhaustive-deps }, []);

It works once I remove props.query in line 154 from the dependency array of the package node_modules/react-native-google-places-autocomplete/GooglePlacesAutocomplete.js. Thanks !

[virajbhosalebbi]

BhargavaAS' solution works! However just curious if it will affect anything else. Has anyone noticed any side-effects by implementing the proposed solution?

My use case is the same as Frontend-dev-sarah.

Also just curious how y'all are handling the potential issue of node_modules not being tracked by version control (github, gitlab etc.) when this is pushed to production/other machine.

[brandonzalcman]

@Frontend-dev-sarah I believe we had the same issue with trying to set the initial value. I have had this issue with react natives textInput in my app and found that setting defaultValue works instead of value.

I have created a PR ( #fix: textInput default value causing flicker #932 ) where i have updated this component to allow defaultValue instead of value.

This is how it can be implemented:

<GooglePlacesAutocomplete
    placeholder='Search'
    defaultValue={defaultValue}
    textInputProps={{
        autoCapitalize: 'none',
        autoCorrect: false,
        textAlignVertical: 'center',
    }}
    // rest of params
/>

Note the removal of value prop from textInputProps and addition of defaultValue.

Feel free to reach out if you need help.

[augustosamame]

@Frontend-dev-sarah I believe we had the same issue with trying to set the initial value. I have had this issue with react natives textInput in my app and found that setting defaultValue works instead of value.

I have created a PR ( #fix: textInput default value causing flicker #932 ) where i have updated this component to allow defaultValue instead of value.

This is how it can be implemented:

<GooglePlacesAutocomplete
    placeholder='Search'
    defaultValue={defaultValue}
    textInputProps={{
        autoCapitalize: 'none',
        autoCorrect: false,
        textAlignVertical: 'center',
    }}
    // rest of params
/>

Note the removal of value prop from textInputProps and addition of defaultValue.

Feel free to reach out if you need help.

Thanks for this @brandonzalcman Nothing else worked except your fork. Just a heads up though, that in Expo Web, there is a console warning regarding the fix:

Warning: TextInput contains an input of type undefined with both value and defaultValue props. Input elements must be either controlled or uncontrolled (specify either the value prop, or the defaultValue prop, but not both). Decide between using a controlled or uncontrolled input element and remove one of these props. More info: https://reactjs.org/link/controlled-components
    at input
    at LocaleProvider (http://localhost:8081/node_modules/expo-router/entry.bundle?... etc

This happened even after adding

textInputProps={{
    autoCapitalize: 'none',
    autoCorrect: false,
    textAlignVertical: 'center',
}} 

without value prop

[brandonzalcman]

@augustosamame Yeh that error makes sense. I didnt do any expo web testing sorry.

I can try work on a solution for it which would be making it so either value or defaultValue can be set and if one is set, the other is not. I believe in the current way the component is made it forces value, so when defaultValue is added that is whats causing that error.

[augustosamame]

Yes, that makes sense. I'll try to take a look as well. It's a shame your PR has not been merged into the project. Having an initial value pulled from props for this component is basic functionality IMO. I'm surprised it has not been mentioned before.

[brandonzalcman]

@augustosamame Yeh agreed.

I have just pushed a potential fix to my fork which should use either value or defaultValue. Feel free to give it a test and let me know if it worked.

Thanks

[augustosamame]

@augustosamame Yeh agreed.

I have just pushed a potential fix to my fork which should use either value or defaultValue. Feel free to give it a test and let me know if it worked.

Thanks

Your fixed worked like a charm. Thanks!