byteburgers / react-native-autocomplete-input

Pure javascript autocomplete input for react-native
https://byteburgers.com/autocomplete
MIT License
818 stars 255 forks source link

Menu items not selectable in android when overlapping another view #215

Closed Muirik closed 3 years ago

Muirik commented 3 years ago

I am running into an issue, similar to what was referenced here: https://github.com/mrlaessig/react-native-autocomplete-input/issues/169, where, in Android, I am not able to select list items that overlap another view. I can see them displaying overtop the other view, but they are not selectable. Only the menu items appearing over the parent view are actually selectable. From research, I also see people ran into this with react-native-dropdown-picker: https://github.com/hossein-zare/react-native-dropdown-picker/issues/40.

Is there a resolution or workaround for this?

const renderAutoCompleteNameSection = () => {
      return (
        <View style={styles.forms.fieldContainer} keyboardShouldPersistTaps='always'>
        <Text style={styles.forms.fieldLabel}>Full Name</Text>
          <View style={{ 
                width: '100%',
                flexDirection: 'row',
                alignItems: 'flex-start',
                justifyContent: 'flex-start',
                position: 'absolute',
                padding: 10,
                zIndex: 99,
           }}>
            <Autocomplete
              autoCapitalize={"words"}
              keyboardShouldPersistTaps='always'
              autoCorrect={false}
              containerStyle={ styles.forms.autocompleteContainer }
              data={getDataList()}
              defaultValue={this.props.visit.verification.name.value ? this.props.visit.verification.name.value : query}
              inputContainerStyle={{ left: 100, borderWidth: 0 }}
              listContainerStyle={ styles.forms.listContainerStyle }
              onChangeText={(value) => {
                this.setState({ storedValueAssigned: false });
                chillax('visitUpdateTextField-SigneeName', () => {
                  let visit = clone(this.props.visit);
                  visit.verification = { 
                    ...visit.verification,
                    name: { value: value, lastUpdate: Date.serverTime() },
                  }
                  this.props.updateVisit(visit);
                  this.updateNamesArr(value);
                }); 
                this.setState({ query: value, assignedStoredValue: false });
              }}
              placeholder="name"
              flatListProps={{
                keyboardShouldPersistTaps: 'always',
                keyExtractor: (name) => name.name,
                renderItem: ({ item: { name } }) => (
                  <TouchableOpacity onPress={() => this.setState({ query: name, storedValueAssigned: true }, () => {
                    chillax('visitUpdateTextField-SigneeName', () => {
                      let visit = clone(this.props.visit);
                      visit.verification = { 
                        ...visit.verification,
                        name: { value: this.state.query, lastUpdate: Date.serverTime() },
                      }
                      this.props.updateVisit(visit);
                      this.setState(this.state);
                    });
                  })}>
                    <Text style={{ padding: 5 }}>{name}</Text>
                  </TouchableOpacity>
                )
              }}
            />
          </View>
      </View>
      )
    }

Styling looks like this:

import Colors from "./Colors";

const styles = {
  sectionContainer: {
    flexDirection: 'column',
    alignItems: 'flex-start',
    justifyContent: 'flex-start',
    marginBottom: 10,
  },
  sectionLabel: {
    fontSize: 17,
    color: Colors.text,
    textAlign: 'center',
  },
  fieldContainer: {
    width: '100%',
    flexDirection: 'row',
    alignItems: 'flex-start',
    justifyContent: 'flex-start',
    padding: 20,
    borderBottomColor: Colors.borderLight,
    borderBottomWidth: 1,
  },
  autocompleteContainer: {
    flex: 1,
    left: 150,
    position: 'relative',
    zIndex: 4,
    right: 0,
    alignSelf: 'center',
    justifyContent: 'flex-end',
  },
  listContainerStyle: {
    right: 10,
    zIndex: 200, 
    position: 'relative',
    elevation: Platform.OS === 'android' ? 50 : 0,
  },
  fieldLabel: {
    alignSelf: 'center',
    fontSize: 15,
    fontWeight: 'bold',
    paddingRight: 5,
    color: Colors.text,
    width: '40%',
  },
  field: {
    flex: 1,
    flexDirection: 'row',
    alignSelf: 'flex-start',
    justifyContent: 'flex-end',
    textAlign: 'right',
    maxHeight: 200,
    fontSize: 15,
    color: Colors.text,
    borderWidth: 0,
  },
  fieldOverlay: {
    position: 'absolute',
    height:'100%',
    width: '100%',
    opacity: .5,
    zIndex: 1,
  },
  switch: {
    width: 50,
  },
  submitButton: {
    flexDirection: 'row',
    justifyContent: 'center',
  },
};

styles.textArea = {
  ...styles.field,
  width: '100%',
  textAlign: 'left',
}

export default styles;
sam9010 commented 3 years ago

how to fix it?