Picker - multi select - fix behavior when the value is changed by user (#2010)

* Picker - multi select - fix behavior when the value is changed by user

* Apply only to multi

Author: M-i-k-e-l

src/components/picker/helpers/usePickerSelection.tsx

@@ -1,18 +1,25 @@
-import {RefObject, useCallback, useState} from 'react';
+import {RefObject, useCallback, useState, useEffect} from 'react';
 import _ from 'lodash';
-import {PickerProps, PickerValue, PickerSingleValue, PickerMultiValue} from '../types';
+import {PickerProps, PickerValue, PickerSingleValue, PickerMultiValue, PickerModes} from '../types';
 
 interface UsePickerSelectionProps
-  extends Pick<PickerProps, 'migrate' | 'value' | 'onChange' | 'getItemValue' | 'topBarProps'> {
+  extends Pick<PickerProps, 'migrate' | 'value' | 'onChange' | 'getItemValue' | 'topBarProps' | 'mode'> {
   pickerExpandableRef: RefObject<any>;
   setSearchValue: (searchValue: string) => void;
 }
 
 const usePickerSelection = (props: UsePickerSelectionProps) => {
-  const {migrate, value, onChange, topBarProps, pickerExpandableRef, getItemValue, setSearchValue} = props;
+  const {migrate, value, onChange, topBarProps, pickerExpandableRef, getItemValue, setSearchValue, mode} = props;
   const [multiDraftValue, setMultiDraftValue] = useState(value as PickerMultiValue);
   const [multiFinalValue, setMultiFinalValue] = useState(value as PickerMultiValue);
 
+  useEffect(() => {
+    if (mode === PickerModes.MULTI && multiFinalValue !== value) {
+      setMultiDraftValue(value as PickerMultiValue);
+      setMultiFinalValue(value as PickerMultiValue);
+    }
+  }, [value]);
+
   const onDoneSelecting = useCallback((item: PickerValue) => {
     setSearchValue('');
     setMultiFinalValue(item as PickerMultiValue);

src/components/picker/new.tsx

@@ -86,7 +86,8 @@ const Picker = (props: PropsWithChildren<PickerProps> & ForwardRefInjectedProps
     pickerExpandableRef: pickerExpandable,
     getItemValue,
     topBarProps,
-    setSearchValue
+    setSearchValue,
+    mode
   });
 
   const {label, accessibilityInfo} = usePickerLabel({