Auto close selection dropdown after press outside. about react-native-multiple-select HOT 13 OPEN

We definitely need a way to close the dropdown even if you don't select an option, either by clicking outside or via a cancel button

from react-native-multiple-select.

I just found this workaround using the component callbacks using the React functional component:
first, you have to wrap your main screen with the TouchableWithoutFeedback component.

const multiSelectRef = useRef();
const closeMultiSelectIfOpened = () => {
    if (multiSelectRef.current.state.selector) {
      multiSelectRef.current._toggleSelector();
    }
  }

return(
<TouchableWithoutFeedback onPress={closeMultiSelectIfOpened}>
  <View style={styles.screen}>
        <View style={{ flex: 1 }}>
            <MultiSelect ref={multiSelectRef} ........ />
         </View>
          ...............
   </View>
</TouchableWithoutFeedback>
);

from react-native-multiple-select.

no work

from react-native-multiple-select.

Did you find a solution?

from react-native-multiple-select.

Is there any plan to fix this issue ?

from react-native-multiple-select.

Please use the latest version. There ought to be a dropdown icon that can be pressed to close the dropdown

from react-native-multiple-select.

@toystars, you mean 0.4.4 ? I don't see one. Btw, I'm talking about single mode.

from react-native-multiple-select.

@lucifurtun yes, the latest version is 0.4.4. The close icon should also work in single mode

from react-native-multiple-select.

@toystars, I don't see either the close icon, what's the prop i can use to close?

from react-native-multiple-select.

With hideSubmitButton it allows closing the dropdown by tapping the arrow, but I am still looking for a way to automatically close it when tapping outside of the selection box

from react-native-multiple-select.

Is any body got solution?

from react-native-multiple-select.

I just found this workaround using the component callbacks using the React functional component:
first, you have to wrap your main screen with the TouchableWithoutFeedback component.

const multiSelectRef = useRef();
const closeMultiSelectIfOpened = () => {
    if (multiSelectRef.current.state.selector) {
      multiSelectRef.current._toggleSelector();
    }
  }

return(
<TouchableWithoutFeedback onPress={closeMultiSelectIfOpened}>
  <View style={styles.screen}>
        <View style={{ flex: 1 }}>
            <MultiSelect ref={multiSelectRef} ........ />
         </View>
          ...............
   </View>
</TouchableWithoutFeedback>
);

i change to: <MultiSelect onToggleList={() => closeMultiSelectIfOpened()} ........ />
it work with me

from react-native-multiple-select.

I just found this workaround using the component callbacks using the React functional component: first, you have to wrap your main screen with the TouchableWithoutFeedback component.

const multiSelectRef = useRef();
const closeMultiSelectIfOpened = () => {
    if (multiSelectRef.current.state.selector) {
      multiSelectRef.current._toggleSelector();
    }
  }

return(
<TouchableWithoutFeedback onPress={closeMultiSelectIfOpened}>
  <View style={styles.screen}>
        <View style={{ flex: 1 }}>
            <MultiSelect ref={multiSelectRef} ........ />
         </View>
          ...............
   </View>
</TouchableWithoutFeedback>
);

its working but flatlist scroll working so slowly , anyone know ?

from react-native-multiple-select.