CODEWITHSUNDEEP
javascriptcssreactjsreact-nativejsx
BeniaminoBaggins
BeniaminoBaggins

Reputation: 12433

react-native-autocomplete-input list not closing when selecting an option

My react-native-autocomplete-input list doesn't seem to close when I choose an item from the list. 

let Location = (props) => (

  <View style={styles.formItem}>

    <Autocomplete
      data={props.autocompleteResults.predictions}
      defaultValue={props.locationInput.toString()}
      onChangeText={
        text => {
          props.updateLocationInput(text)
          props.getAutocompleteResults(text)
        }
      }
      renderItem={place => (
        <TouchableOpacity
          style={{
            height: 44,
            flex: 1,
            justifyContent: 'center',
            ...styles.label,
            borderRadius: 8
          }}
          onPress={() => {
            console.log(place)
            props.updatePlace(place)
            props.updateLocationInput(place.description)
          }}>
          <Text numberOfLines={1}>{place.description}</Text>
        </TouchableOpacity>
      )}
      inputContainerStyle={{ borderWidth: 0 }}
      style={{
        height: 44,
        borderRadius: 8,
        backgroundColor: '#FFFFFF',
        alignSelf: 'stretch',
        paddingLeft: 10,
        position: 'relative',
        ...styles.label
      }}
    />
  </View>
)
Location.propTypes = {
  locationInput: React.PropTypes.string.isRequired,
  updateLocationInput: React.PropTypes.func.isRequired,
  getAutocompleteResults: React.PropTypes.func.isRequired,
  autocompleteResults: React.PropTypes.object.isRequired,
  updatePlace: React.PropTypes.func.isRequired
}

Location = connect(
  mapStateToProps,
  mapDispatchToProps
)(Location)

This is how the Location component is used. Container is a native-base component:

<Container style={styles.container}>
        <ScrollView keyboardShouldPersistTaps={true}>
          <Categories />
          <View style={{ zIndex: 2, position: 'relative' }}>
            <Location />
          </View>
          <Keywords />
          <Button block style={styles.wideButton} onPress={() => props.toggleMenu()}>
            <Text>GO</Text>
          </Button>
        </ScrollView>
      </Container>

The Location component is inside a ScrollView however the issue is still there when I take the scrollview out. Also I have done the scroll view fix <ScrollView keyboardShouldPersistTaps={true}> What could be making the list never close?

Upvotes: 2

Views: 2902

Answers (1)

Codesingh
Codesingh

Reputation: 3384

We can try this :-

//if data is not available then there would be nothing to show..
data={(!props.autocompleteResults.predictions.length || props.clicked)? [] : props.autocompleteResults.predictions }

onChangeText={
        text => {
          props.updateLocationInput(text)
          props.getAutocompleteResults(text)
          props.changeClick(false)
        }
      }

onPress={() => {
            console.log(place)
            props.updatePlace(place)
            props.updateLocationInput(place.description)
            props.changeClick(true) 
          }}

Inside the component:

constructor(props)
{
  super(props);
  this.state={ clicked : false }
}

<Location clicked = {this.state.clicked} changeClick={(isClicked) => this.setState({clicked: isClicked})} />

Cheers :)

Upvotes: 4

Related Questions