Only can select the first option in the dropdown on android.

[JSJerome]

On my android phone, I can only select the first choice in the autocomplete list. It works as expected on my iPhone. The list filters as I type but no matter what the first option is after filtering, I can only select the first option in the list. I tried adding a "console.log" to the touchables in the list to see if the other options are registering the touch event and they aren't. Without giving away too much of my code it is as follows: ` <ScrollView contentContainerStyle={[formStyles.container]} scrollEventThrottle={64} keyboardDismissMode="on-drag" onScroll={() => { if(!this.state.hideResults){this.setState({hideResults:true})}}}> <KeyboardAvoidingView behavior={"padding"}>

{this.state.contactsRetrieved ? retrievedContactText : noRetrievedContactText} this.inviteeControl = ref} hideResults={this.state.hideResults} inputContainerStyle={[textStyles.container, {width: '100%', borderWidth: 0}]} onChangeText={(text) => { this.setState({ invitee: text }); if(this.state.invalidContact){ this.validateContact(); } this.filterContacts(text); }} renderItem={({ item, i }) => ( {this.setState({ invitee: item, hideResults:true, invalidContact: false })}} style={[{width: "100%"}, i > 0 ? {marginTop: 10} : {}]}> {item.name} )} listStyle={[{width: '100%', position: 'relative'}]} keyExtractor={(item, i) => {return i +""}} listContainerStyle={[textStyles.container, {width: responsiveWidth(parseInt(textStyles.textboxes.width.replace('%', ''))), position:'absolute', left: 0, top: textStyles.textboxes.height, justifyContent: 'center', alignItems: 'center', zIndex:300}]} autoFocus={true} blurOnSubmit={false} underlineColorAndroid='transparent' /> {!this.state.invalidContact ? : null} {this.state.addNewInvitee ? addNewInviteeCancelBtn : null} {this.state.invalidContact ? invalidInviteeText : null}

            </KeyboardAvoidingView>
        </ScrollView>

const AddViewInviteeStyles = StyleSheet.create({ inviteeInputMainView: { alignItems: 'center', marginTop: 40, marginBottom: 20 }, inviteeInputInstructionText: { ...textStyles.requiredNotice, ...textStyles.notifyTextStyle, fontSize: responsiveFontSize(2), ...Platform.select({ android:{ width: responsiveWidth(90) } }) }, inviteeInputAutocompleteView:{ ...textStyles.container, flexDirection: 'row', ...Platform.select({ android: { width: responsiveWidth(parseInt(textStyles.textboxes.width.replace('%' , ''))), }, ios:{ width: textStyles.textboxes.width } }) }, inviteeInputAutocomplete: { ...textStyles.textboxes, ...textStyles.firstTextBoxInFirstRow, ...textStyles.firstTextBoxInLastRow, width: '100%' }

});

const formStyles = StyleSheet.create({ container: { ...appStyles.container, flexGrow: 1, width: '100%', } });

const appStyles = StyleSheet.create({ container: { backgroundColor: '#e9dec2', } });

const textStyles = StyleSheet.create({ container: { alignItems: 'center', }, textboxes: { color: '#3c3b5f', backgroundColor: '#F0F8FF', width: '80%', paddingLeft: 5, paddingRight: 2, minHeight: 35, height: 50, borderBottomColor: '#fbdd07', borderBottomWidth: 1, }, requiredNotice: { color: 'grey', fontSize: 13, marginTop: 70, }, firstTextBox: { marginTop: 70, borderTopLeftRadius: 8, borderTopRightRadius: 8 }, firstTextBoxInFirstRow: { borderTopLeftRadius: 8, }, lastTextBoxInFirstRow: { borderTopRightRadius: 8, }, firstTextBoxWithNotice: { borderTopLeftRadius: 8, borderTopRightRadius: 8

},
textBoxInRow: {
    borderRightWidth: 1,
    borderBottomColor: '#fbdd07',
    //borderRightColor: '#fbdd07'
},
notifyTextStyle: { 
    marginTop: '7%', 
    fontSize: responsiveFontSize(4), 
    fontWeight: "300"
}

}) `

[maronski]

From the note for using it on Android by adding this style:

<Autocomplete 
...
 containerStyle={styles.autocompleteContainer}
/>

const styles = StyleSheet.create({
  autocompleteContainer: {
    flex: 1,
    left: 0,
    position: 'absolute',
    right: 0,
    top: 0,
    zIndex: 1
  }
});

which is not working for me, that's why I tried to add dynamic height based on the length of the data displayed.

render(){
const initialInputHeight = 70;
const data = this.findResult(query);

return (
<View>
...
<Autocomplete 
...
data={data}
containerStyle={{
    flex: 1,
    left: 0,
    position: 'absolute',
    height: initialInputHeight * (data.length + 1),
    right: 0,
    top: 0,
    zIndex: 1
  }
}}
/>
...
</View>
)
}

[mirchat]

same problem. any suggestion ?

[wstock]

Using TouchableOpacity from RNGH fixed for me

import { TouchableOpacity } from "react-native-gesture-handler";

[stale[bot]]

Hey there, it looks like there has been no activity on this issue recently. Has the issue been fixed, or does it still require the community's attention? This issue may be closed if no further activity occurs. Thank you for your contributions.

[stale[bot]]

Closing this issue after a prolonged period of inactivity. If this issue is still present in the latest release, please feel free to create a new issue with up-to-date information.