Autocomplete enhancement with additional schema types (#1910)

Author: dsuren1

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 (
         <div className={`autocomplete${className ? " " + className : ""}`}>
             <div className="title-container">
@@ -59,9 +55,6 @@ const Autocomplete = ({
                 value={getValue()}
                 valueKey={valueKey}
                 labelKey={labelKey}
-                {...props.creatable && {
-                    newOptionCreator: props.newOptionCreator ?? defaultNewOptionCreator
-                }}
             />
         </div>
     );

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}

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]
                                     }
                                 };
                             })