Searchable Dropdown not working on Android

23 Views Asked by At

I have created SearchableDropdown where you can select and find(via text search) specific item from dropdown.On iOS is working perfectly alright, but when I tested on Android I am getting problem to select item from SearchableDropdown.That is because when I click on SearchableDropdown it focuses it and show the items but, on android whenever I try to click anywhere except the keyboard it automatically dismiss focus from SearchableDropdown and the items are hidden (because they are shown when the field is on focus).So I am not able to select the item.Is there some value or property which I can add to disable that behaviour

This is my code:

const [selectedItemNames, setSelectedItemNames] = useState('');

// Value of how much fields should be created
const [selectTags, setSelectTags] = useState([]);


const handleItemNameSelect = (index, value) => {
    console.log(value);
    
    const newSelectTags = [...selectTags];
    newSelectTags[index].itemName = value;
    setSelectTags(newSelectTags);

    const newSelectedItemNames = [...selectedExerciseNames];
    newSelectedItemNames[index] = value;
    setSelectedItemNames(newSelectedItemNames);
    setSelectedDropdownIndex(index);
    itemHistory(newSelectedItemNames, index);
  };
 
  const handleItemNameChange = (index, value) => {
    console.log("handleItemNameChange - value:", value);
    const newSelectTags = [...selectTags];
    newSelectTags[index] = {
      ...newSelectTags[index],
      itemName: value,
    };
    setSelectTags(newSelectTags);
  };

<SearchableDropdown
          
            onTextChange={(text) => handleItemNameChange(index, text)}
            onItemSelect={(item) => handleItemNameSelect(index, item.name)}
            textInputStyle={{ color: '#fff', fontSize: dynamicFontSize(4),}}
            itemTextStyle={{ color: '#fff', fontSize: dynamicFontSize(4), paddingTop: 10 }}
            items={exerciseData} // dropdown items from itemData.js file
            textInputProps={{
              placeholder: "Select An Example",
              placeholderTextColor: "grey",
              underlineColorAndroid: "transparent",
              style: {
                padding: 12,
                fontSize:dynamicFontSize(4),
                borderWidth: 1,
                borderColor: '#ccc',
                borderRadius: 5,
                color: '#fff',
                marginBottom: dynamicFontSize(5),
                backgroundColor: 'transparent',
              },
              
              value: selectedItemNames[index], 
            }}
            resetValue={false}
            selectedItem={selectedItemNames[index]}
          />
0

There are 0 best solutions below