Fix issue with missing selected indicator in Picker items (#1065)

Author: ethanshar

demo/src/screens/componentScreens/PickerScreen.js

@@ -2,10 +2,12 @@ import _ from 'lodash';
 import React, {Component} from 'react';
 import {ScrollView, Image} from 'react-native';
 import {View, Colors, Dialog, Text, Picker, Avatar, Assets, PanningProvider} from 'react-native-ui-lib'; //eslint-disable-line
-import contacts from '../../data/conversations';
+import contactsData from '../../data/conversations';
 import tagIcon from '../../assets/icons/tags.png';
 import dropdown from '../../assets/icons/chevronDown.png';
 
+const contacts = _.map(contactsData, c => ({...c, value: c.name, label: c.name}));
+
 const options = [
   {label: 'JavaScript', value: 'js'},
   {label: 'Java', value: 'java'},
@@ -248,7 +250,7 @@ export default class PickerScreen extends Component {
             // useNativePicker
           >
             {_.map(options, option => (
-              <Picker.Item key={option.value} value={option.value} label={option.label} disabled={option.disabled} />
+              <Picker.Item key={option.value} value={option.value} label={option.label} disabled={option.disabled}/>
             ))}
           </Picker>
         </View>

src/components/picker/PickerItem.js

@@ -31,7 +31,8 @@ const PickerItem = props => {
   const context = useContext(PickerContext);
   const {migrate} = context;
   const customRenderItem = context.renderItem || props.renderItem;
-  const isSelected = isItemSelected(value, !migrate && _.isPlainObject(context.value) ? context.value.value : context.value);
+  const itemValue = !migrate && _.isPlainObject(value) ? value?.value : value;
+  const isSelected = isItemSelected(itemValue, context.value);
   const itemLabel = getItemLabel(label, value, props.getItemLabel || context.getItemLabel);
   const accessibilityProps = {
     accessibilityState: isSelected ? {selected: true} : undefined,

src/components/picker/PickerPresenter.js

@@ -4,7 +4,9 @@ export function isItemSelected(childValue, selectedValue) {
   let isSelected = false;
 
   if (Array.isArray(selectedValue)) {
-    isSelected = _.includes(selectedValue, childValue);
+    isSelected = !!_.find(selectedValue, v => {
+      return v === childValue || v?.value === childValue;
+    });
   } else {
     isSelected = childValue === selectedValue;
   }

src/components/picker/index.js

@@ -1,4 +1,6 @@
 // TODO: deprecate all places where we check if _.isPlainObject
+// TODO: deprecate getItemValue prop
+// TODO: deprecate getItemLabel prop
 import _ from 'lodash';
 import PropTypes from 'prop-types';
 import React, {PureComponent} from 'react';
@@ -209,9 +211,10 @@ class Picker extends PureComponent {
   getContextValue = () => {
     const {value, searchValue} = this.state;
     const {migrate, mode, getItemValue, getItemLabel, renderItem, showSearch} = this.props;
+    const pickerValue = !migrate && _.isPlainObject(value) ? value?.value : value;
     return {
       migrate,
-      value,
+      value: pickerValue,
       onPress: mode === Picker.modes.MULTI ? this.toggleItemSelection : this.onDoneSelecting,
       isMultiMode: mode === Picker.modes.MULTI,
       getItemValue,