X-Git-Url: https://git.arvados.org/arvados-workbench2.git/blobdiff_plain/a747f4a071514837cdac553d86c228c996c74514..17dfef9d2440ddbac9cd8eac0ec8be721b42cc09:/src/views-components/resource-properties-form/property-value-field.tsx diff --git a/src/views-components/resource-properties-form/property-value-field.tsx b/src/views-components/resource-properties-form/property-value-field.tsx index d0044e18..b023e412 100644 --- a/src/views-components/resource-properties-form/property-value-field.tsx +++ b/src/views-components/resource-properties-form/property-value-field.tsx @@ -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) => { const newValue = e.currentTarget.value; const tagValueID = getTagValueID(propertyKeyId, newValue, vocabulary);