Text disapper after select an item from drop down list

[cksiow]

When using the component setting as below
<SearchableDropdown
ref={control => this.placeTypeControl = control}
onItemSelect={(item) => {
this.state.saveData.placeTypeId = item.id;
this.setState({});
}}
containerStyle={{ marginTop: 10 }}
itemStyle={{
padding: 10,
marginTop: 2,
backgroundColor: 'white',
borderColor: '#bbb',
borderWidth: 1,
borderRadius: 5,
}}
itemTextStyle={{ color: '#222' }}
itemsContainerStyle={{ height: 125 }}
items={this.state.placeType}
resetValue={false}
textInputProps={
{
placeholder: "",
underlineColorAndroid: "transparent",
style: {
paddingTop: 12,
paddingBottom: 12,
fontSize: 20,
borderWidth: 1,
borderColor: 'black',
borderRadius: 0,
},
onSelectionChange: (e) => {
this.state.saveData.placeTypeId = null;
this.setState({
});
}
}
}
listProps={
{
nestedScrollEnabled: true,
}
}
/>

sample of this.state.placeType
[
{
id: "1",
name: "test1"
},
{
id: "2",
name: "test1"
}
]

after select an item, a while the display text will become blank, after debug and check, found out in onBlur event
this.setState({ focus: false, item: this.props.selectedItems });
change to
this.setState({ focus: false, item: this.props.selectedItems ? this.props.selectedItems : this.state.item });

will resolve the issuedue to this.props.selectedItems set to undefined after while.

[varunkumarmedam]

same issue here. any working resolution?

[cksiow]

same issue here. any working resolution?

after select an item, a while the display text will become blank, after debug and check, found out in onBlur event
this.setState({ focus: false, item: this.props.selectedItems });
change to
this.setState({ focus: false, item: this.props.selectedItems ? this.props.selectedItems : this.state.item });

will resolve the issuedue to this.props.selectedItems set to undefined after while.

[p8ul]

Might not be the best practice but adding a timeout before setting the value works. Although with some glitch.

At around line 124:

 <TouchableOpacity
          style={{ ...this.props.itemStyle }}
          onPress={() => {
            this.setState({ item: item, focus: false }); // replace this with the code below
            setTimeout(() => { // timeout before setting value
              this.setState({ item: item, focus: false }); 
            }, 100);
            
            Keyboard.dismiss();
            setTimeout(() => {
              this.props.onItemSelect(item);
              if (this.props.resetValue) {
                this.setState({ focus: true, item: defaultItemValue });
                this.input.focus();
              }
            }, 0);
          }}
        >```