From 06e0f36dda1457716e90716d1230d391b5e3620d Mon Sep 17 00:00:00 2001
From: Zak Burke <zburke@users.noreply.github.com>
Date: Thu, 9 Jul 2020 22:47:34 -0400
Subject: [PATCH] STCOM-715 Correct validation for User Record Custom Fields
 MultiSelection (#1328)

Correctly present validation error for `<MultiSelection>` component
if it has no value and disable `Save&Close` button

Refs STCOM-715

Co-authored-by: Denys Bohdan <Denys_Bohdan@epam.com>
---
 lib/MultiSelection/MultiSelect.css            | 12 +++++-
 lib/MultiSelection/MultiSelectFilterField.js  |  2 +-
 lib/MultiSelection/MultiSelectValueInput.js   | 40 +++++++++++++++++++
 lib/MultiSelection/MultiSelection.js          | 14 +++++++
 .../tests/MultiSelection-test.js              | 12 ++++++
 lib/MultiSelection/tests/interactor.js        |  9 +++--
 6 files changed, 84 insertions(+), 5 deletions(-)
 create mode 100644 lib/MultiSelection/MultiSelectValueInput.js

diff --git a/lib/MultiSelection/MultiSelect.css b/lib/MultiSelection/MultiSelect.css
index a92f1856a..dc2f56d40 100644
--- a/lib/MultiSelection/MultiSelect.css
+++ b/lib/MultiSelection/MultiSelect.css
@@ -37,7 +37,7 @@
   cursor: pointer;
 }
 
-.multiSelectInput {
+.multiSelectFilterField {
   margin: 2px;
   background-color: transparent;
   padding: 0 4px;
@@ -45,6 +45,16 @@
   outline: 0;
 }
 
+.multiSelectValueInput {
+  position: absolute;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  border: none;
+  z-index: -1;
+  color: transparent;
+}
+
 .multiSelectValueListContainer {
   display: flex;
   flex: 0 1 auto;
diff --git a/lib/MultiSelection/MultiSelectFilterField.js b/lib/MultiSelection/MultiSelectFilterField.js
index 32c7b6936..ccc576f17 100644
--- a/lib/MultiSelection/MultiSelectFilterField.js
+++ b/lib/MultiSelection/MultiSelectFilterField.js
@@ -71,7 +71,7 @@ class MultiSelectFilterField extends React.Component {
           onFocus,
           onBlur,
           placeholder,
-          'className': css.multiSelectInput,
+          'className': css.multiSelectFilterField,
           disabled,
         })}
       />
diff --git a/lib/MultiSelection/MultiSelectValueInput.js b/lib/MultiSelection/MultiSelectValueInput.js
new file mode 100644
index 000000000..ffc487eb5
--- /dev/null
+++ b/lib/MultiSelection/MultiSelectValueInput.js
@@ -0,0 +1,40 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import css from './MultiSelect.css';
+
+const propTypes = {
+  ariaLabelledBy: PropTypes.string,
+  getInputProps: PropTypes.func.isRequired,
+  id: PropTypes.string.isRequired,
+  required: PropTypes.bool,
+  value: PropTypes.string,
+};
+
+const MultiSelectValueInput = ({
+  ariaLabelledBy,
+  id,
+  required,
+  getInputProps,
+  value,
+  ...rest
+}) => (
+  <input
+    {...getInputProps({
+      'aria-labelledby': rest['aria-labelledby'] || ariaLabelledBy,
+      type: 'text',
+      id,
+      className: css.multiSelectValueInput,
+      required,
+      value,
+      tabindex: '-1',
+    })}
+  />
+);
+
+MultiSelectValueInput.propTypes = propTypes;
+
+MultiSelectValueInput.defaultProps = {
+  required: false,
+};
+
+export default MultiSelectValueInput;
diff --git a/lib/MultiSelection/MultiSelection.js b/lib/MultiSelection/MultiSelection.js
index c320f9f6f..e1fab3c02 100644
--- a/lib/MultiSelection/MultiSelection.js
+++ b/lib/MultiSelection/MultiSelection.js
@@ -15,6 +15,7 @@ import { FormattedMessage } from 'react-intl';
 import MultiDownshift from './MultiDownshift';
 import SelectedValuesList from './SelectedValuesList';
 import MultiSelectFilterField from './MultiSelectFilterField';
+import MultiSelectValueInput from './MultiSelectValueInput';
 import MultiSelectResponsiveRenderer from './MultiSelectResponsiveRenderer';
 import SRStatus from '../SRStatus';
 import DefaultOptionFormatter from '../Selection/DefaultOptionFormatter';
@@ -251,6 +252,10 @@ class MultiSelection extends React.Component {
     }
   };
 
+  renderValueInput = (inputProps) => {
+    return <MultiSelectValueInput {...inputProps} />;
+  };
+
   handleDownshiftStateChange = (changes) => {
     if (this.props.asyncFiltering) {
       if (Object.prototype.hasOwnProperty.call(changes, 'isOpen') &&
@@ -384,6 +389,14 @@ class MultiSelection extends React.Component {
               disabled,
             };
 
+            const inputProps = {
+              ariaLabelledBy,
+              id: `multiselect-input-${uiId}`,
+              required,
+              getInputProps,
+              value: Array.isArray(value) ? value.map(this.props.itemToString).join(',') : value,
+            };
+
             const optionListProps = {
               actions,
               ariaLabelledBy,
@@ -465,6 +478,7 @@ class MultiSelection extends React.Component {
                     <div className={css.multiSelectControlGroup}>
                       <SelectedValuesList {...valueListProps} />
                       {this.renderInputOrPlaceholder(filterProps)}
+                      {this.renderValueInput(inputProps)}
                     </div>
                     <button
                       className={css.multiSelectToggleButton}
diff --git a/lib/MultiSelection/tests/MultiSelection-test.js b/lib/MultiSelection/tests/MultiSelection-test.js
index 6ad676f6f..9ddb839c4 100644
--- a/lib/MultiSelection/tests/MultiSelection-test.js
+++ b/lib/MultiSelection/tests/MultiSelection-test.js
@@ -66,6 +66,10 @@ describe('MultiSelect', () => {
     expect(multiselection.controlAriaLabelledBy).to.equal(`multi-value-status-${testId}`);
   });
 
+  it('should have empty hidden value', () => {
+    expect(multiselection.inputValue).to.equal('');
+  });
+
   describe('supplying a label prop', () => {
     beforeEach(async () => {
       await mountWithContext(
@@ -120,6 +124,10 @@ describe('MultiSelect', () => {
       it('does not render placeholder', () => {
         expect(multiselection.filterPlaceholder).to.equal('');
       });
+
+      it('sets correct hidden input value', () => {
+        expect(multiselection.inputValue).to.equal(listOptions[2].label);
+      });
     });
 
     describe('clicking multiple options', () => {
@@ -215,6 +223,10 @@ describe('MultiSelect', () => {
       expect(multiselection.values(2).valLabel).to.equal(listOptions[5].label);
     });
 
+    it('sets correct value in hidden input', () => {
+      expect(multiselection.inputValue).to.equal(`${listOptions[1].label},${listOptions[3].label},${listOptions[5].label}`);
+    });
+
     describe('Keyboard : navigating selected values', () => {
       describe('Keyboard: pressing the Home key when middle selected value is focused', () => {
         beforeEach(async () => {
diff --git a/lib/MultiSelection/tests/interactor.js b/lib/MultiSelection/tests/interactor.js
index e6c6c8dc9..5ac37aeb0 100644
--- a/lib/MultiSelection/tests/interactor.js
+++ b/lib/MultiSelection/tests/interactor.js
@@ -12,6 +12,7 @@ import {
   isPresent,
   text,
   count,
+  value,
 } from '@bigtest/interactor';
 
 import SelectionCss from '../../Selection/Selection.css';
@@ -26,8 +27,9 @@ const controlClass = selectorFromClassnameString(`.${css.multiSelectControl}`);
 const menuClass = selectorFromClassnameString(`.${css.multiSelectMenu}`);
 const errorClass = selectorFromClassnameString(`.${formCss.feedbackError}`);
 const warningClass = selectorFromClassnameString(`.${formCss.feedbackWarning}`);
-const filterClass = selectorFromClassnameString(`.${css.multiSelectInput}`);
+const filterClass = selectorFromClassnameString(`.${css.multiSelectFilterField}`);
 const emptyClass = selectorFromClassnameString(`.${css.multiSelectEmptyMessage}`);
+const inputClass = selectorFromClassnameString(`.${css.multiSelectValueInput}`);
 
 const OptionInteractor = interactor(class OptionInteractor {
   defaultScope = optionClass;
@@ -60,6 +62,7 @@ export default interactor(class MultiSelectInteractor {
   emptyMessagePresent = isPresent(emptyClass);
   filterPlaceholder = attribute(filterClass, 'placeholder');
   loaderPresent = isPresent(`.${iconCss.spinner}`);
+  inputValue = value(inputClass);
 
   // aria-attributes
   controlAriaLabelledBy = attribute(controlClass, 'aria-labelledby');
@@ -105,10 +108,10 @@ export default interactor(class MultiSelectInteractor {
       .click(`li:nth-of-type(${index}`);
   }
 
-  expandAndFilter(value) {
+  expandAndFilter(fieldValue) {
     return this
       .click('button')
-      .fill('input', value);
+      .fill('input', fieldValue);
   }
 
   moveToNextOption(sel, setFocus = false) {