STSMACOM-500: Fix MultiSelect when using CustomField via final form (#…

…1044) Co-authored-by: Denys Bohdan <[email protected]>
folio-org · Apr 20, 2021 · 18bd545 · 18bd545
1 parent d40c368
commit 18bd545
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 7 deletions.
diff --git 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
@@ -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
@@ -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",