touch/ click in picker

Question

I am developing an android application. I want to search and find an item. I am using react-native-modal-filter-picker . It works fine, but after typing the item name when result is displaying I can't select the item from the first click/ touch.

In the first touch - it takes time to deactivate the keypad

only in the second touch I am able to select the item. I want to select the item from the first click itself

Answer 1

I guess what you are looking for is keyboardShouldPersistTaps={'handled'} props, this will consider your first tap on an item. If you click on a specific item, the keyboard will not be hidden, if you want to hide it, please consider using Keyboard.dismiss().

Below you will find a working example:

import React from 'react';
import {
  View,
  Keyboard,
} from 'react-native'
import ModalFilterPicker from 'react-native-modal-filter-picker'


export default class App extends React.Component {
  render() {
    const options = [
      {
        key: 'kenya',
        label: 'Kenya',
      },
      {
        key: 'uganda',
        label: 'Uganda',
      },
      {
        key: 'libya',
        label: 'Libya',
      },
      {
        key: 'morocco',
        label: 'Morocco',
      },
      {
        key: 'estonia',
        label: 'Estonia',
      },
    ];

    return (
        <View style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>
          <ModalFilterPicker
              options={options}
              onSelect={option => {
                console.log(option);
                Keyboard.dismiss();
              }}
              onCancel={() => {}}
              keyboardShouldPersistTaps={'handled'}
          />
        </View>
    );
  }
}