BUG Fix multi-selection treefield

client/src/components/TreeDropdownField/TreeDropdownField.js

@@ -369,7 +369,7 @@ class TreeDropdownField extends Component {
 
       if (value && value.length) {
         const uniqueValues = value && value
-            .filter((item, index) => value.indexOf(item) === index);
+            .filter((item, index) => value.findIndex(next => next.id === item.id) === index);
         mappedValue = uniqueValues.map(item => item.id);
 
         this.props.actions.treeDropdownField.addSelectedValues(this.props.id, uniqueValues);
@@ -496,9 +496,14 @@ class TreeDropdownField extends Component {
     const loading = this.props.loading.indexOf(visibleTree.id || 0) > -1;
     const failed = this.props.failed.indexOf(visibleTree.id || 0) > -1;
     const breadcrumbs = this.getBreadcrumbs();
-    const value = (this.props.data.multiple)
-      ? this.props.value
-      : [this.props.value];
+
+    // Always coerce value to array for menu (even if not multi-select)
+    let value = [];
+    if (this.props.value) {
+      value = Array.isArray(this.props.value)
+        ? this.props.value
+        : [this.props.value];
+    }
 
     return (
       <TreeDropdownFieldMenu
@@ -625,9 +630,15 @@ class TreeDropdownField extends Component {
       ? `treedropdownfield ${this.props.extraClass}`
       : 'treedropdownfield';
     const options = this.getDropdownOptions();
-    const value = (this.props.data.multiple)
-      ? this.props.selectedValues.filter(item => this.props.value.includes(item.id))
-      : this.props.value;
+    let value = this.props.value;
+
+    // Multiple select should be coerced to array
+    if (this.props.data.multiple) {
+      value = this.props.value
+        ? this.props.selectedValues.filter(item => value.includes(item.id))
+        : [];
+    }
+
     const resetValue = (this.props.data.hasEmptyDefault && !this.props.visible.length)
       ? ''
       : null;

client/src/components/TreeDropdownField/tests/TreeDropdownField-test.js

@@ -188,6 +188,17 @@ describe('TreeDropdownField', () => {
         );
       });
 
+      it('should ensure unique values are selected', () => {
+        field.handleChange([{ id: 15, title: 'orig' }, { id: 65 }, { id: 15, title: 'dupe' }]);
+
+        expect(field.handleSearchReset).toBeCalled();
+        expect(field.props.onChange).toBeCalledWith([15, 65]);
+        expect(field.props.actions.treeDropdownField.addSelectedValues).toBeCalledWith(
+          props.id,
+          [{ id: 15, title: 'orig' }, { id: 65 }]
+        );
+      });
+
       it('should return "unchanged" for no selected values', () => {
         field.handleChange([]);
 

client/src/legacy/TreeDropdownField/TreeDropdownFieldEntwine.js

@@ -3,7 +3,10 @@ import React from 'react';
 import ReactDOM from 'react-dom';
 import { ApolloProvider } from 'react-apollo';
 import { schemaMerge } from 'lib/schemaFieldValues';
-import { ConnectedTreeDropdownField } from 'components/TreeDropdownField/TreeDropdownField';
+import {
+  ConnectedTreeDropdownField,
+  MULTI_EMPTY_VALUE,
+} from 'components/TreeDropdownField/TreeDropdownField';
 import { provideInjector } from 'lib/Injector';
 
 const InjectableTreeDropdownField = provideInjector(ConnectedTreeDropdownField);
@@ -16,7 +19,18 @@ jQuery.entwine('ss', ($) => {
       this._super();
 
       const state = this.data('state') || {};
-      this.setValue(state.value ? Number(state.value) : '');
+      const schema = this.data('schema') || {};
+      const isMultiple = schema.data && schema.data.multiple;
+
+      if (isMultiple) {
+        this.setValue(
+          (state.value && state.value !== MULTI_EMPTY_VALUE)
+            ? state.value.map(next => Number(next))
+            : []
+        );
+      } else {
+        this.setValue(state.value ? Number(state.value) : '');
+      }
 
       this.find(':input').remove();
       this.refresh();