fix picker multi value

Author: lidord-wix

src/components/picker/index.js

@@ -1,6 +1,7 @@
 // TODO: deprecate all places where we check if _.isPlainObject
 // TODO: deprecate getItemValue prop
 // TODO: deprecate getItemLabel prop
+// TODO: Add initialValue prop
 import _ from 'lodash';
 import PropTypes from 'prop-types';
 import React, {Component} from 'react';
@@ -162,10 +163,10 @@ class Picker extends Component {
     super(props);
 
     this.state = {
-      value: props.value,
-      prevValue: undefined,
       selectedItemPosition: 0,
-      items: Picker.extractPickerItems(props)
+      items: Picker.extractPickerItems(props),
+      multiDraftValue: props.value,
+      multiFinalValue: props.value
     };
 
     if (props.mode === Picker.modes.SINGLE && Array.isArray(props.value)) {
@@ -186,26 +187,10 @@ class Picker extends Component {
   }
 
   static getDerivedStateFromProps(nextProps, prevState) {
-    const hasNextValue = !_.isEmpty(nextProps.value) || _.isNumber(nextProps.value);
-    /* Relevant for keeping the value prop controlled - react when user change value prop */
-    const externalValueChanged = hasNextValue && prevState.value !== nextProps.value;
-    /* Relevant for multi select mode when we keep an internal value state */
-    const internalValueChanged = prevState.value !== prevState.prevValue;
-    if (internalValueChanged && nextProps.mode === Picker.modes.MULTI) {
-      /* for this.setState() updates to 'value'
-      NOTE: this.setState() already updated the 'value' so here we only updating the 'prevValue' */
-      return {
-        prevValue: prevState.value
-      };
-    } else if (externalValueChanged) {
-      return {
-        value: nextProps.value
-      };
-    } else if (_.isFunction(nextProps.renderPicker) && externalValueChanged) {
-      return {
-        prevValue: prevState.value,
-        value: nextProps.value
-      };
+    if (nextProps.mode === Picker.modes.MULTI) {
+      if (prevState.multiFinalValue !== nextProps.value) {
+        return {multiDraftValue: nextProps.value, multiFinalValue: nextProps.value};
+      }
     }
     return null;
   }
@@ -230,12 +215,12 @@ class Picker extends Component {
   }
 
   getContextValue = () => {
-    const {value} = this.state;
-    const {migrate, mode, getItemValue, getItemLabel, renderItem, selectionLimit} = this.props;
+    const {multiDraftValue} = this.state;
+    const {migrate, mode, getItemValue, getItemLabel, renderItem, selectionLimit, value} = this.props;
     const pickerValue = !migrate && _.isPlainObject(value) ? value?.value : value;
     return {
       migrate,
-      value: pickerValue,
+      value: mode === Picker.modes.MULTI ? multiDraftValue : pickerValue,
       onPress: mode === Picker.modes.MULTI ? this.toggleItemSelection : this.onDoneSelecting,
       isMultiMode: mode === Picker.modes.MULTI,
       getItemValue,
@@ -314,27 +299,27 @@ class Picker extends Component {
   };
 
   toggleItemSelection = item => {
-    const {getItemValue} = this.props;
-    const {value} = this.state;
+    const {getItemValue, migrate} = this.props;
+    const {multiDraftValue} = this.state;
     let newValue;
-    if (_.isPlainObject(value)) {
-      newValue = _.xorBy(value, [item], getItemValue || 'value');
+    if (!migrate) {
+      newValue = _.xorBy(multiDraftValue, [item], getItemValue || 'value');
     } else {
-      newValue = _.xor(value, [item]);
+      newValue = _.xor(multiDraftValue, [item]);
     }
 
-    this.setState({value: newValue});
+    this.setState({multiDraftValue: newValue});
   };
 
   cancelSelect = () => {
-    this.setState({value: this.props.value});
+    this.setState({multiDraftValue: this.state.multiFinalValue});
     this.toggleExpandableModal(false);
     _.invoke(this.props, 'topBarProps.onCancel');
   };
 
   onDoneSelecting = item => {
     this.clearSearchField();
-    this.setState({value: item});
+    this.setState({multiFinalValue: item});
     this.toggleExpandableModal(false);
     _.invoke(this.props, 'onChange', item);
   };
@@ -372,15 +357,15 @@ class Picker extends Component {
       testID,
       pickerModalProps
     } = this.props;
-    const {showExpandableModal, selectedItemPosition, value} = this.state;
+    const {showExpandableModal, selectedItemPosition, multiDraftValue} = this.state;
 
     if (renderCustomModal) {
       const modalProps = {
         visible: showExpandableModal,
         toggleModal: this.toggleExpandableModal,
         onSearchChange: this.onSearchChange,
         children,
-        onDone: () => this.onDoneSelecting(value),
+        onDone: () => this.onDoneSelecting(multiDraftValue),
         onCancel: this.cancelSelect
       };
 
@@ -403,7 +388,7 @@ class Picker extends Component {
           topBarProps={{
             ...topBarProps,
             onCancel: this.cancelSelect,
-            onDone: mode === Picker.modes.MULTI ? () => this.onDoneSelecting(value) : undefined
+            onDone: mode === Picker.modes.MULTI ? () => this.onDoneSelecting(multiDraftValue) : undefined
           }}
           showSearch={showSearch}
           searchStyle={searchStyle}
@@ -429,7 +414,7 @@ class Picker extends Component {
     }
 
     if (_.isFunction(renderPicker)) {
-      const {value} = this.state;
+      const {value} = this.props;
 
       return (
         <View left>