From 18bd545247b391bad3efa81804356099a750927b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Micha=C5=82=20Kuklis?= <michal.kuklis@gmail.com>
Date: Tue, 20 Apr 2021 11:06:29 -0400
Subject: [PATCH] STSMACOM-500: Fix MultiSelect when using CustomField via
 final form (#1044)

Co-authored-by: Denys Bohdan <denys_bohdan@epam.com>
---
 CHANGELOG.md                                  |  1 +
 .../EditCustomFieldsRecord.js                 | 20 ++++++++++++-------
 package.json                                  |  1 +
 3 files changed, 15 insertions(+), 7 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 164543378..77f33bd3e 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -6,6 +6,7 @@
 * STSMACOM-415: Replace noteData type and title - with No value component. Refs STSMACOM-415.
 * Organizations alternate address label in org view not showing correctly. Refs STSMACOM-497.
 * Execute validation manually when record is being saved. Fixes STSMACOM-496.
+* Fix `<MultiSelect>` when using `<CustomField>` via final form. Fixes STSMACOM-500.
 
 ## [6.0.1](https://github.com/folio-org/stripes-smart-components/tree/v6.0.1) (2021-03-03)
 [Full Changelog](https://github.com/folio-org/stripes-smart-components/compare/v6.0.0...v6.0.1)
diff --git a/lib/CustomFields/pages/EditCustomFieldsRecord/EditCustomFieldsRecord.js b/lib/CustomFields/pages/EditCustomFieldsRecord/EditCustomFieldsRecord.js
index c34b2e6ed..e9ec107fc 100644
--- a/lib/CustomFields/pages/EditCustomFieldsRecord/EditCustomFieldsRecord.js
+++ b/lib/CustomFields/pages/EditCustomFieldsRecord/EditCustomFieldsRecord.js
@@ -5,6 +5,7 @@ import {
   FormattedMessage,
   useIntl,
 } from 'react-intl';
+import { OnChange } from 'react-final-form-listeners';
 
 import {
   chunk,
@@ -207,13 +208,6 @@ const EditCustomFieldsRecord = ({
   const getMultiSelectProps = customField => {
     if (customField.type === fieldTypes.MULTISELECT) {
       return {
-        onChange(form, values) {
-          if (!values.length) {
-            setIsValid(false);
-          } else {
-            setIsValid(true);
-          }
-        },
         error: checkValid(customField)
       };
     }
@@ -238,6 +232,18 @@ const EditCustomFieldsRecord = ({
           {...props}
           {...getMultiSelectProps(customField)}
         />
+        {
+          customField.type === fieldTypes.MULTISELECT &&
+          <OnChange name={`customFields.${customField.refId}`}>
+            {(values) => {
+              if (!values.length) {
+                setIsValid(false);
+              } else {
+                setIsValid(true);
+              }
+            }}
+          </OnChange>
+        }
       </Col>
     )
   );
diff --git a/package.json b/package.json
index 3488511a3..0c26cab31 100644
--- a/package.json
+++ b/package.json
@@ -82,6 +82,7 @@
     "react-copy-to-clipboard": "^5.0.1",
     "react-final-form": "^6.3.0",
     "react-final-form-arrays": "^3.1.1",
+    "react-final-form-listeners": "^1.0.3",
     "react-query": "^3.9.8",
     "react-router-prop-types": "^1.0.4",
     "react-transition-group": "^2.4.0",