When Item is selected in single select dropdown, it stores the selected item details but does not show in dropdown?

[prajna-h]

`state = {
    visnames: [
        {
            id: 1,
            name: 'JavaScript',
        },
        {
            id: 2,
            name: 'Java',
        },
        {
            id: 3,
            name: 'Ruby',
        },
        {
            id: 4,
            name: 'React Native',
        },
        {
            id: 5,
            name: 'PHP',
        },
        {
            id: 6,
            name: 'Python',
        },
        {
            id: 7,
            name: 'Go',
        },
        {
            id: 8,
            name: 'Swift',
        },
    ],
    selectedStore: '',
    selectedStoreId: ''
};
<View style={{ margin: 20 }}>
    <SearchableDropdown
        onItemSelect={(item, index) => {
            console.log(item)
            this.setState({
                selectedStore: item.name,
                selectedStoreId: item.id
            })
        }}
        itemStyle={styles.dropdowninput}
        itemTextStyle={styles.searchdropdowncolor}
        itemsContainerStyle={styles.searchdropdown}
        items={visnames}
        defaultIndex={''}
        resetValue={false}
        textInputProps={
            {
                placeholder: "Select Store",
                underlineColorAndroid: "transparent",
                style: {
                    padding: 12,
                    borderWidth: 1,
                    borderColor: '#ccc',
                    borderRadius: 5,
                },
            }
        }
        listProps={{ nestedScrollEnabled: true, }}
    />
</View>`

[Cristiano1103]

Hello, i fix this problem doing this:

in this line: (/node_modules/react-native-searchable-dropdown)

{ key: 'value', val: this.state.item ? this.state.item.name : '' },

Change to:

{ key: 'value', val: this.state.item ? this.state.item.name : this.state.item },

i recommend u copy the file and pass to src/components to avoid update and reset your changes

[Munish-GitHub]

anyone found the solution. @Cristiano1103 I could not make it work either by that change.

[Cristiano1103]

@Munish-GitHub i changed , i`m using now UI Kitten, witch offers Select but without search. Works very good.

this solution is only for Apple, i tested in my android and didin't work. And have a lot of bugs. Try UI Kitten

[tanvirshajahan4]

My solution was to check if item i clicked use place holder to replace eg: placeholder ={this.state.carBrand=="" ?'Select Brand': this.state.carBrand}

[bhatvikrant]

@Munish-GitHub i changed , i`m using now UI Kitten, witch offers Select but without search. Works very good.

this solution is only for Apple, i tested in my android and didin't work. And have a lot of bugs. Try UI Kitten

Yea Autocomplete in UI Kitten has some positioning bugs for android

[bhatvikrant]

My solution was to check if item i clicked use place holder to replace eg: placeholder ={this.state.carBrand=="" ?'Select Brand': this.state.carBrand}

LOL what a work around buddy, works like a charm

[JagjeetSingh001]

I fixed the issue with commenting this line. because i console 'this.props.selectedItems' it returns undefined.

 return (
      <TextInput
        {...textInputProps}
        onBlur={(e) => {
          if (this.props.onBlur) {
            this.props.onBlur(e);
          }
          if (this.props.textInputProps && this.props.textInputProps.onBlur) {
            this.props.textInputProps.onBlur(e);
          }
          // this.setState({ focus: false, item: this.props.selectedItems }); // comment this line
        }
        }
      />

[jerry-inc]

My solution was to check if item i clicked use place holder to replace eg: placeholder ={this.state.carBrand=="" ?'Select Brand': this.state.carBrand}

Saved my day

[booncoder123]

@Cristiano1103 his solution work for me nice! but it work only in IOS

[SamBaloyi]

My solution was to check if item i clicked use place holder to replace eg: placeholder ={this.state.carBrand=="" ?'Select Brand': this.state.carBrand}

This can even be made better by using the placeholderTextColor property for example

onItemSelect={(item) => setCarBrand(item.name)}
placeholder={car}
placeholderTextColor={car === "Default car value" ? color.palette.lightGrey : color.palette.black}