Merge branch '15067-tag-editing-by-ids'

[arvados.git] / src / views-components / resource-properties-form / property-field-common.tsx

diff --git a/src/views-components/resource-properties-form/property-field-common.tsx b/src/views-components/resource-properties-form/property-field-common.tsx
index a90ce923265b779758b64987c68dd3070009ff06..65d0c7c87f18752df97ba6862dc7cef215b90a82 100644 (file)
--- a/src/views-components/resource-properties-form/property-field-common.tsx
+++ b/src/views-components/resource-properties-form/property-field-common.tsx
@@ -3,7 +3,7 @@
 // SPDX-License-Identifier: AGPL-3.0
 
 import { connect } from 'react-redux';
-import { WrappedFieldMetaProps, WrappedFieldInputProps, WrappedFieldProps } from 'redux-form';
+import { change, WrappedFieldMetaProps, WrappedFieldInputProps, WrappedFieldProps } from 'redux-form';
 import { Vocabulary, PropFieldSuggestion } from '~/models/vocabulary';
 import { RootState } from '~/store/store';
 import { getVocabulary } from '~/store/vocabulary/vocabulary-selectors';
@@ -28,18 +28,39 @@ export const getErrorMsg = (meta: WrappedFieldMetaProps) =>
         ? meta.error
         : '';
 
-export const handleBlur = ({ onBlur, value }: WrappedFieldInputProps) =>
-    () =>
-        onBlur(value);
-
 export const buildProps = ({ input, meta }: WrappedFieldProps) => {
     return {
         value: input.value,
         onChange: input.onChange,
-        onBlur: handleBlur(input),
         items: ITEMS_PLACEHOLDER,
         renderSuggestion: (item:PropFieldSuggestion) => item.label,
         error: hasError(meta),
         helperText: getErrorMsg(meta),
     };
 };
+
+// Attempts to match a manually typed value label with a value ID, when the user
+// doesn't select the value from the suggestions list.
+export const handleBlur = (
+    fieldName: string,
+    formName: string,
+    { dispatch }: WrappedFieldMetaProps,
+    { onBlur, value }: WrappedFieldInputProps,
+    fieldValue: string) =>
+        () => {
+            dispatch(change(formName, fieldName, fieldValue));
+            onBlur(value);
+        };
+
+// When selecting a property value, save its ID for later usage.
+export const handleSelect = (
+    fieldName: string,
+    formName: string,
+    { onChange }: WrappedFieldInputProps,
+    { dispatch }: WrappedFieldMetaProps ) =>
+        (item:PropFieldSuggestion) => {
+            if (item) {
+                onChange(item.label);
+                dispatch(change(formName, fieldName, item.id));
+            }
+        };