Merge pull request #1212 from jinzo/autocomplete-instead-of-single-select

Replace Select with Autocomplete with single Selects

1 files changed, 39 insertions, 18 deletions

diff --git a/modern/src/common/components/SelectField.jsx b/modern/src/common/components/SelectField.jsx
index 35f817a0..db8c30b0 100644
--- a/modern/src/common/components/SelectField.jsx
+++ b/modern/src/common/components/SelectField.jsx
@@ -1,5 +1,5 @@
 import {
-  FormControl, InputLabel, MenuItem, Select,
+  FormControl, InputLabel, MenuItem, Select, Autocomplete, TextField,
 } from '@mui/material';
 import React, { useState } from 'react';
 import { useEffectAsync } from '../../reactHelper';
@@ -8,9 +8,9 @@ const SelectField = ({
   label,
   fullWidth,
   multiple,
-  value,
-  emptyValue = 0,
-  emptyTitle = '\u00a0',
+  value = null,
+  emptyValue = null,
+  emptyTitle = '',
   onChange,
   endpoint,
   data,
@@ -19,6 +19,13 @@ const SelectField = ({
 }) => {
   const [items, setItems] = useState(data);
 
+  const getOptionLabel = (option) => {
+    if (typeof option !== 'object') {
+      option = items.find((obj) => keyGetter(obj) === option);
+    }
+    return option ? titleGetter(option) : emptyTitle;
+  };
+
   useEffectAsync(async () => {
     if (endpoint) {
       const response = await fetch(endpoint);
@@ -33,20 +40,34 @@ const SelectField = ({
   if (items) {
     return (
       <FormControl fullWidth={fullWidth}>
-        <InputLabel>{label}</InputLabel>
-        <Select
-          label={label}
-          multiple={multiple}
-          value={value}
-          onChange={onChange}
-        >
-          {!multiple && emptyValue !== null && (
-            <MenuItem value={emptyValue}>{emptyTitle}</MenuItem>
-          )}
-          {items.map((item) => (
-            <MenuItem key={keyGetter(item)} value={keyGetter(item)}>{titleGetter(item)}</MenuItem>
-          ))}
-        </Select>
+        {multiple ? (
+          <>
+            <InputLabel>{label}</InputLabel>
+            <Select
+              label={label}
+              multiple
+              value={value}
+              onChange={onChange}
+            >
+              {items.map((item) => (
+                <MenuItem key={keyGetter(item)} value={keyGetter(item)}>{titleGetter(item)}</MenuItem>
+              ))}
+            </Select>
+          </>
+        ) : (
+          <Autocomplete
+            size="small"
+            options={items}
+            getOptionLabel={getOptionLabel}
+            renderOption={(props, option) => (
+              <MenuItem {...props} key={keyGetter(option)} value={keyGetter(option)}>{titleGetter(option)}</MenuItem>
+            )}
+            isOptionEqualToValue={(option, value) => keyGetter(option) === value}
+            value={value}
+            onChange={(_, value) => onChange({ target: { value: value ? keyGetter(value) : emptyValue } })}
+            renderInput={(params) => <TextField {...params} label={label} />}
+          />
+        )}
       </FormControl>
     );
   }