React Hook Form multi select not working in React Native Dropdown Picker

[msafi04]

I am trying to do a multi select using React Native Dropdown Picker using React Hook Form Controller. I could get the multi select values in MultiSelect Form component but on submit I don't get the values in "handleSubmit" data. My code is below. Any help is much appreciated. Thank you!

`
import {View, StyleSheet, ScrollView} from 'react-native';
import {useNavigation} from '@react-navigation/native';
import {useForm} from 'react-hook-form';

import RHFFormMultiSelect from '../../components/RHFFormMultiSelect';
import RHFTextInput from '../../components/RHFTextInput';
import RHFFormSelect from '../../components/RHFFormSelect';
import {languageList, genderList} from '../../utils/dropdownLists';

const EditProfileOne = () => {
const defaultValues = {
firstName: '',
gender: '',
language: [],
};

const {control, handleSubmit} = useForm({
defaultValues: defaultValues,
});

const navigation = useNavigation();

const handleNextPress = data => {
console.log(data);
setPageOne(data);
navigation.navigate('EditProfileTwo');
};
return (
<>

<ScrollView showsVerticalScrollIndicator={false} style={{flex: 1, backgroundColor: colors.bgColor}}>


<RHFFormSelect
name="gender"
placeholder="Gender"
dropdownList={genderList}
searchable={false}
control={control}
rules={{
required: 'Gender is required',
}}
/>
<RHFFormMultiSelect
name="language"
placeholder="Languages Spoken"
dropdownList={languageList}
dropDownDirection="TOP"
control={control}
rules={{
required: 'Languages spoken is required',
}}
/>
<AppButton
title="Next"
onPress={handleSubmit(handleNextPress)}
style={{zIndex: -1}}
/>


</>
);
};
Below is my MultiSelect Component:
import {View, StyleSheet} from 'react-native';
import {Controller} from 'react-hook-form';
import DropDownPicker from 'react-native-dropdown-picker';
import {useState} from 'react';

import colors from '../config/colors';
import AppText from './AppText';

const RHFFormMultiSelect = ({
control,
name,
placeholder,
dropdownList,
searchable = false,
rules = {},
secureTextEntry,
dropDownDirection = 'TOP',
min = 1,
max = 4,
}) => {
const [listOpen, setListOpen] = useState(false);
return (
<View style={{zIndex: -1}}>
<Controller
control={control}
name={name}
rules={rules}
render={({field: {value, onChange}, fieldState: {error}}) => {
console.log(value); // Here I get values in array e.g.["french", "german", "english"]
return (
<>
<DropDownPicker
style={styles.dropdown}
placeholder={placeholder}
placeholderStyle={styles.dropdownPlaceholder}
multiple={true}
min={min}
max={max}
mode="BADGE"
open={listOpen}
setOpen={() => setListOpen(!listOpen)}
items={dropdownList}
value={value}
setValue={item => onChange(item)}
listMode="SCROLLVIEW"
dropDownDirection={dropDownDirection}
searchable={searchable}
autoScroll
/>
{error && (

{error.message || 'Error!'}

)}
</>
);
}}
/>

);
};
`
When I console log the value in render above I get the values in array '["french", "german", "english"]' but in handleNextPress data I get values as '[Function anonymous]'

[Moshyfawn]

The DropDownPicker setValue state callback doesn't return a new field value, but rather a useState's setValue`-like callback that takes the current field value as an argument to resolve the new field value.

<DropDownPicker
  value={field.value}
  setValue={cb => {
    const newValue = cb(field.value)
    field.onChange(newValue)
  }}
/>

Here's a working example codesandbox.

[msafi04]

Thank you @Moshyfawn. It fixed the my problem. But when I do multiple selects, it's behaving weird. You can check your sandbox demo as well. I select second option it deselects others. Is it a bug in the picker?

[jchiversTRG]

Having this exact same issue currently with using multi select DropdownPicker within a React Hook Form Controller.
When selecting more than one new value, the previous value gets deselected.

Did you ever find a solution?

[PavelTankovich]

@msafi04 @jchiversTRG I haven’t deeply investigated the issue, but it’s clearly related to memoization. Try using getValues from useFormContext instead of passing the value directly via the render prop. This solved the issue for me — now the value is always up-to-date.

const { getValues, } = useFormContext<FormValues>();
 ...
 render={({ field: { onChange, value } }) => {
 ...
 setValue={(setStateFn: SetStateCallback<Value | Value[] | null>) => {
  const combinedValue = setStateFn(getValues(name))
  
  onChange(combinedValue);
}}