17579: added better description for the test
[arvados-workbench2.git] / src / views-components / resource-properties-form / property-value-field.tsx
index d0044e18c73093fcb0c502db4f075cdf3a1e2aab..b023e412ff533571bfae33443d8061ca9f3201cc 100644 (file)
@@ -2,12 +2,12 @@
 //
 // SPDX-License-Identifier: AGPL-3.0
 
-import * as React from 'react';
+import React from 'react';
 import { WrappedFieldProps, Field, formValues, FormName, WrappedFieldInputProps, WrappedFieldMetaProps, change } from 'redux-form';
 import { compose } from 'redux';
-import { Autocomplete } from '~/components/autocomplete/autocomplete';
-import { Vocabulary, isStrictTag, getTagValues, getTagValueID } from '~/models/vocabulary';
-import { PROPERTY_KEY_FIELD_ID, PROPERTY_KEY_FIELD_NAME } from '~/views-components/resource-properties-form/property-key-field';
+import { Autocomplete } from 'components/autocomplete/autocomplete';
+import { Vocabulary, isStrictTag, getTagValues, getTagValueID, getTagValueLabel } from 'models/vocabulary';
+import { PROPERTY_KEY_FIELD_ID, PROPERTY_KEY_FIELD_NAME } from 'views-components/resource-properties-form/property-key-field';
 import {
     handleSelect,
     handleBlur,
@@ -15,9 +15,9 @@ import {
     ValidationProp,
     connectVocabulary,
     buildProps
-} from '~/views-components/resource-properties-form/property-field-common';
-import { TAG_VALUE_VALIDATION } from '~/validators/validators';
-import { escapeRegExp } from '~/common/regexp.ts';
+} from 'views-components/resource-properties-form/property-field-common';
+import { TAG_VALUE_VALIDATION } from 'validators/validators';
+import { escapeRegExp } from 'common/regexp';
 import { ChangeEvent } from 'react';
 
 interface PropertyKeyProp {
@@ -60,7 +60,14 @@ const PropertyValueInput = ({ vocabulary, propertyKeyId, propertyKeyName, ...pro
             disabled={props.disabled}
             suggestions={getSuggestions(props.input.value, propertyKeyId, vocabulary)}
             onSelect={handleSelect(PROPERTY_VALUE_FIELD_ID, data.form, props.input, props.meta)}
-            onBlur={handleBlur(PROPERTY_VALUE_FIELD_ID, data.form, props.meta, props.input, getTagValueID(propertyKeyId, props.input.value, vocabulary))}
+            onBlur={() => {
+                // Case-insensitive search for the value in the vocabulary
+                const foundValueID =  getTagValueID(propertyKeyId, props.input.value, vocabulary);
+                if (foundValueID !== '') {
+                    props.input.value = getTagValueLabel(propertyKeyId, foundValueID, vocabulary);
+                }
+                handleBlur(PROPERTY_VALUE_FIELD_ID, data.form, props.meta, props.input, foundValueID)();
+            }}
             onChange={(e: ChangeEvent<HTMLInputElement>) => {
                 const newValue = e.currentTarget.value;
                 const tagValueID = getTagValueID(propertyKeyId, newValue, vocabulary);