Fix tag multi select reset on click

Author: GilbertCherrie

app/javascript/tagging/components/InnerComponents/ValueModifier.js

@@ -5,6 +5,7 @@ import ValueSelector from './ValueSelector';
 import TaggingPropTypes from '../TaggingPropTypes';
 
 const ValueModifier = ({
+  selectedTagCategory,
   values,
   onTagValueChange,
   selectedTagValues,
@@ -15,6 +16,7 @@ const ValueModifier = ({
   <FormGroup legendText={valueLabel}>
     <Column className="tag-modifier-form-row value-modifier">
       <ValueSelector
+        selectedTagCategory={selectedTagCategory}
         values={values}
         onTagValueChange={onTagValueChange}
         selectedOption={selectedTagValues}
@@ -26,6 +28,7 @@ const ValueModifier = ({
 );
 
 ValueModifier.propTypes = {
+  selectedTagCategory: PropTypes.string.isRequired,
   selectedTagValues: PropTypes.arrayOf(TaggingPropTypes.value),
   onTagValueChange: PropTypes.func.isRequired,
   valueLabel: PropTypes.string,

app/javascript/tagging/components/InnerComponents/ValueSelector.js

@@ -102,7 +102,7 @@ class ValueSelector extends React.Component {
           label={label}
           initialSelectedItems={selectedOptions}
           // eslint-disable-next-line react/destructuring-assignment
-          key={selectedOptions.length === 0 ? -1 : this.props.values[0].id + selectedOptions.length}
+          key={this.props.selectedTagCategory.description}
           items={values}
           disabled={isDisabled}
           onChange={(val) => this.handleChange(val)}
@@ -135,6 +135,10 @@ class ValueSelector extends React.Component {
 }
 
 ValueSelector.propTypes = {
+  selectedTagCategory: PropTypes.objectOf({
+    id: PropTypes.string.isRequired,
+    description: PropTypes.string.isRequired,
+  }).isRequired,
   selectedOption: PropTypes.arrayOf(TaggingPropTypes.value),
   values: PropTypes.arrayOf(TaggingPropTypes.value).isRequired,
   onTagValueChange: PropTypes.func.isRequired,

app/javascript/tagging/components/Tagging/Tagging.js

@@ -76,6 +76,7 @@ class Tagging extends React.Component {
               isDisabled={isDisabled}
             />
             <ValueModifier
+              selectedTagCategory={selectedTagCategory}
               onTagValueChange={this.onTagValueChange}
               selectedTagValues={this.getSelectedCategoryValues().values}
               multiValue={this.isMulti(selectedTagCategory)}

app/javascript/tagging/tests/__snapshots__/tagging.test.js.snap

@@ -55,6 +55,12 @@ exports[`Tagging component without redux mapping match snapshot 1`] = `
         isDisabled={false}
         multiValue={true}
         onTagValueChange={[Function]}
+        selectedTagCategory={
+          Object {
+            "description": "animal",
+            "id": 1,
+          }
+        }
         selectedTagValues={
           Array [
             Object {
@@ -161,6 +167,12 @@ exports[`Tagging component without redux mapping should call methods - singleVal
         isDisabled={false}
         multiValue={true}
         onTagValueChange={[Function]}
+        selectedTagCategory={
+          Object {
+            "description": "Food",
+            "id": 4,
+          }
+        }
         selectedTagValues={Array []}
         valueLabel="Value"
         values={
@@ -264,6 +276,12 @@ exports[`Tagging component without redux mapping should call methods - singleVal
         isDisabled={false}
         multiValue={false}
         onTagValueChange={[Function]}
+        selectedTagCategory={
+          Object {
+            "description": "Something",
+            "id": 5,
+          }
+        }
         selectedTagValues={Array []}
         valueLabel="Value"
         values={