[BugForMultiSelect]Drop down list rendering bug

[yy412715118]

https://user-images.githubusercontent.com/17873134/161226429-bb9ad0e1-4e35-4a4a-8ee@hoaphantn7604 -a6950bf79fa3.mp4

Hi @hoaphantn7604 , I found other bug for MultiSelect, When the data list is requested from the network, there will be strange bugs in the rendering of MultiSelect. I have attached the video and code.

Component version: 1.8.5

Code:

import React, { useEffect, useState } from 'react'; import { StyleSheet, View } from 'react-native'; import { Icon,Text } from 'react-native-elements'; import { MultiSelect } from 'react-native-element-dropdown';

export const CategoryDropdown = () => { const [isFocus, setIsFocus] = useState(false); const [selected, setSelected] = useState(null); const [data, setData] = useState<{label:string,value:string}[]>([]);

useEffect(() => { fetch('http://16.162.26.222:5000/api/Common/GetDictionaryItems?dictionary=trade').then((response) => response.json()).then(res => { if (res && res.ok) { if (res.data && res.data.length>0) { let d:{label:string,value:string}[] = [] res.data.map((item:any)=>{ d.push({label:item.value, value:item.id}); }) setData(d); } } }) .catch(err => { console.log('error:', err); }); }, []);

const renderItem = (item: any) => { return (

{item.label}

);

};

return (

( )} data={data} maxHeight={300} labelField="label" valueField="value" renderItem={renderItem} placeholder={'Search Category'} searchPlaceholder="Search..." value={selected} alwaysRenderItemSelected={true} onFocus={() => setIsFocus(true)} onBlur={() => setIsFocus(false)} onChange={item => { setSelected(item); }} />

); };

const styles = StyleSheet.create({ container: { width:'100%', paddingHorizontal: 10, marginBottom:10, }, dropdown: { height: 46, marginTop: 6, borderColor:'black', borderWidth:1, borderRadius: 4, }, icon: { marginLeft:10, marginRight: 5, }, label: { color:'black', fontSize:20, lineHeight:23.2, fontFamily:'Roboto-Medium', }, placeholderStyle: { fontSize: 14, color: '#CACACA', fontFamily:'Roboto-Medium', }, selectedTextStyle: { fontSize: 16, color:'black', fontFamily:'Roboto-Medium', }, iconStyle: { width: 20, height: 20, }, inputSearchStyle: { height: 40, fontSize: 16, }, item: { padding: 17, flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', }, textItem: { flex: 1, fontSize: 14, fontFamily:'Roboto-Medium', color:'#07183E' }, selectedStyle: { flexDirection: 'row', justifyContent: 'center', alignItems: 'center', borderRadius: 14, backgroundColor: 'white', shadowColor: '#000', marginTop: 8, marginRight: 12, paddingHorizontal: 12, paddingVertical: 8, elevation: 2, }, textSelectedStyle: { marginRight: 5, fontSize: 16, }, });

[hoaphantn7604]

hi @yy412715118 , Please check again with a newer version 1.8.7.

[yy412715118]

hi @yy412715118 , Please check again with a newer version 1.8.7.

It's worked. thanks.