Two clicks needed to select the item from the list

Here is my component:

          <Autocomplete
            data={possibleAddresses}
            inputContainerStyle={styles.inputElement}
            style={styles.inputBox}
            containerStyle={styles.autocompleteContainer}
            placeholder="321 Acme St"
            onChangeText={text => this.lookupAddressMatches(text)}
            listStyle={styles.resultList}
            renderItem={data => (
              <TouchableOpacity
                onPress={() => this.setAddress(data)}
              >
                <Text style={styles.resultListItem}>{data.formattedAddress}</Text>
              </TouchableOpacity>
            )}
          />

My problem is that in order to select an item from the list, they have to click twice on it (at least on Android, haven’t tried ios).

The first click blurs the input box and the second click triggers the onPress of the TouchableOpacity in my renderItem.

Is there a way to not have this behaviour and have the onPress callback triggered even if the field is not currently blurred?

[ilove8]

You can use ScrollView with keyboardShouldPersistTaps='always'. it worked!

[ilove8]

@abhisri2090 I couldn’t remember exactly, but you should try `keyboardShouldPersistTaps=‘always’ on ‘ScrollView’

<ScrollView style={styles.container} keyboardDismissMode='on-drag' keyboardShouldPersistTaps='always'>
...
</ScrollView>