diff --git a/geonode_mapstore_client/client/js/components/Autocomplete/Autocomplete.jsx b/geonode_mapstore_client/client/js/components/Autocomplete/Autocomplete.jsx index deef564b02..559ec1d7fc 100644 --- a/geonode_mapstore_client/client/js/components/Autocomplete/Autocomplete.jsx +++ b/geonode_mapstore_client/client/js/components/Autocomplete/Autocomplete.jsx @@ -9,6 +9,7 @@ import React from 'react'; import isArray from 'lodash/isArray'; import isEmpty from 'lodash/isEmpty'; +import isString from 'lodash/isString'; import PropTypes from 'prop-types'; import SelectInfiniteScroll from '@js/components/SelectInfiniteScroll/SelectInfiniteScroll'; @@ -22,31 +23,26 @@ const Autocomplete = ({ description, helpTitleIcon, id, - labelKey, + labelKey = "label", name, title, value, - valueKey, + valueKey = "value", ...props }) => { const getValue = () => { - if (value && isArray(value) && valueKey && labelKey) { + if (value && isArray(value)) { return value.map((entry) => { return { result: entry, - value: entry[valueKey], - label: entry[labelKey] + [valueKey]: isString(entry) ? entry : entry[valueKey], + [labelKey]: isString(entry) ? entry : entry[labelKey] }; }); } return value; }; - const defaultNewOptionCreator = (option) => ({ - [valueKey]: option.label, - [labelKey]: option.label - }); - return (
@@ -59,9 +55,6 @@ const Autocomplete = ({ value={getValue()} valueKey={valueKey} labelKey={labelKey} - {...props.creatable && { - newOptionCreator: props.newOptionCreator ?? defaultNewOptionCreator - }} />
); diff --git a/geonode_mapstore_client/client/js/components/SelectInfiniteScroll/SelectInfiniteScroll.jsx b/geonode_mapstore_client/client/js/components/SelectInfiniteScroll/SelectInfiniteScroll.jsx index cd1c251755..dc33e6f4a0 100644 --- a/geonode_mapstore_client/client/js/components/SelectInfiniteScroll/SelectInfiniteScroll.jsx +++ b/geonode_mapstore_client/client/js/components/SelectInfiniteScroll/SelectInfiniteScroll.jsx @@ -19,8 +19,8 @@ function SelectInfiniteScroll({ loadOptions, pageSize = 20, debounceTime = 500, - labelKey, - valueKey, + labelKey = "label", + valueKey = "value", newOptionPromptText = "Create option", ...props }) { @@ -46,13 +46,17 @@ function SelectInfiniteScroll({ const updateNewOption = (newOptions, query) => { if (props.creatable && !isEmpty(query)) { - const isValueExist = props.value?.some(v => v[labelKey] === query); - const isOptionExist = newOptions.some((o) => o[labelKey] === query); + const compareValue = (option) => + option?.[labelKey]?.toLowerCase() === query.toLowerCase(); + + const isValueExist = props.value?.some(compareValue); + const isOptionExist = newOptions.some(compareValue); // Add new option if it doesn't exist and `creatable` is enabled if (!isValueExist && !isOptionExist) { return [{ - [labelKey]: `${newOptionPromptText} "${query}"`, value: query, + [labelKey]: `${newOptionPromptText} "${query}"`, + [valueKey]: query, result: { [valueKey]: query, [labelKey]: query } }].concat(newOptions); } @@ -141,6 +145,8 @@ function SelectInfiniteScroll({ {...props} isLoading={loading} options={options} + labelKey={labelKey} + valueKey={valueKey} onOpen={() => setOpen(true)} onClose={() => setOpen(false)} filterOptions={filterOptions} diff --git a/geonode_mapstore_client/client/js/plugins/MetadataEditor/components/_fields/SchemaField.jsx b/geonode_mapstore_client/client/js/plugins/MetadataEditor/components/_fields/SchemaField.jsx index fdd7764353..75d4023a49 100644 --- a/geonode_mapstore_client/client/js/plugins/MetadataEditor/components/_fields/SchemaField.jsx +++ b/geonode_mapstore_client/client/js/plugins/MetadataEditor/components/_fields/SchemaField.jsx @@ -29,7 +29,11 @@ const SchemaField = (props) => { uiSchema } = props; const autocomplete = uiSchema?.['ui:options']?.['geonode-ui:autocomplete']; - const isMultiSelect = schema?.items?.type === 'object' && !isEmpty(schema?.items?.properties); + const isSchemaItemString = schema?.items?.type === 'string'; + const isSchemaItemObject = schema?.items?.type === 'object'; + const isMultiSelect = schema?.type === 'array' && (isSchemaItemString || + (isSchemaItemObject && !isEmpty(schema?.items?.properties)) + ); const isSingleSelect = schema?.type === 'object' && !isEmpty(schema?.properties); if (autocomplete && (isMultiSelect || isSingleSelect)) { @@ -65,10 +69,14 @@ const SchemaField = (props) => { if (result === undefined) { return option; } - return Object.fromEntries( - Object.keys(schema.items.properties) - .map((key) => [key, result[key]]) - ); + return isString(result) + ? result + : isSchemaItemString + ? result[valueKey] + : Object.fromEntries( + Object.keys(schema.items?.properties) + .map((key) => [key, result[key]]) + ); }); } onChange(_selected); @@ -89,8 +97,8 @@ const SchemaField = (props) => { return { selectOption: { result, - value: result[valueKey], - label: result[labelKey] + [valueKey]: isString(result) ? result : result[valueKey], + [labelKey]: isString(result) ? result : result[labelKey] } }; })