Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

[Bug] onFocus prop from textInputProps causes the list view not to display

See original GitHub issue

Bug Description:

Using onFocus prop from textInputProps causes the list view not to display

Reproduction - This my autocomplete implementation:

<GooglePlacesAutocomplete
            ref={(input) => {
              textInput = input;
            }}
            textInputProps={{
              onChangeText: (text) => {
                this.setState({
                  formatted_address: text,
                  selected_street_address:
                    text.indexOf(',') > -1 ? text.substring(0, text.indexOf(',')) : text,
                  selected_address_remainder:
                    text.indexOf(',') > -1 ? text.substring(text.indexOf(',') + 2) : '',
                });
              },
               onFocus: () => {
                 this.setState({ top_view_visible: false });
               },
            }}
            styles={{
              textInput: { fontSize: verticalScale(12) },
              container: { overflow: 'visible', flexGrow: 0, flexShrink: 0, elevation: 200 },
              listView: {
                position: 'absolute',
                top: verticalScale(40),
                elevation: 999,
                zIndex: 999,
                backgroundColor: 'white',
              },
            }}
            scrollEnabled={true}
            placeholder="Search"
            minLength={1}
            autoFocus={true}
            returnKeyType={'search'}
            listViewDisplayed={'auto'}
            fetchDetails={true}
            onPress={(data, details = null) => {
              // 'details' is provided when fetchDetails = true
              LogsHelper.info({ tag: this.TAG, message: 'Data:' + JSON.stringify(data) });
              LogsHelper.info({
                tag: this.TAG,
                message: 'Details: ' + JSON.stringify(details?.formatted_address),
              });
              textInput.setAddressText(details?.formatted_address);
              this.setState({
                selected_street_address: details?.formatted_address.substring(
                  0,
                  details?.formatted_address.indexOf(','),
                ),
                selected_address_remainder: details?.formatted_address.substring(
                  details?.formatted_address.indexOf(',') + 2,
                ),
              });
            }}
            query={{
              key: 'xxx......',
              language: 'en',
            }}
          />

I am using:

Library Version: 1.7.3
React Native Version: 0.61.5
Ejected Expo
iOS
Android
Web

first screen shot you can see autocomplete is working on emulator with onFocus commented out Screen Shot 2020-07-29 at 4 55 49 PM

Once I uncomment onFocus: Screen Shot 2020-07-29 at 5 20 16 PM

Important Note: setting state inside onFocus is the issue. if I replace that line with a log, the list works and the log prints. is this a bug or am I doing something wrong?