2947-Dropdown-Field-Change-to-Autocomplete (#3126)

zesty-io · Jan 15, 2025 · dbcd750 · dbcd750
1 parent a1863cf
commit dbcd750
Showing 1 changed file with 25 additions and 15 deletions.
diff --git a/src/apps/content-editor/src/app/components/Editor/Field/Field.tsx b/src/apps/content-editor/src/app/components/Editor/Field/Field.tsx
@@ -21,6 +21,7 @@ import {
   TextField,
   Dialog,
   IconButton,
+  Autocomplete,
 } from "@mui/material";
 
 import CloseIcon from "@mui/icons-material/Close";
@@ -618,21 +619,30 @@ export const Field = ({
 
       return (
         <FieldShell settings={fieldData} errors={errors}>
-          <Select
-            name={name}
-            variant="outlined"
-            displayEmpty
-            value={value || ""}
-            onChange={(e) => onChange(e.target.value, name)}
-            error={errors && Object.values(errors)?.some((error) => !!error)}
-          >
-            <MenuItem value="">Select</MenuItem>
-            {dropdownOptions.map((dropdownOption, idx) => (
-              <MenuItem key={idx} value={dropdownOption.value}>
-                {dropdownOption.text}
-              </MenuItem>
-            ))}
-          </Select>
+          <Autocomplete
+            clearOnBlur
+            disablePortal
+            options={dropdownOptions}
+            value={
+              dropdownOptions.find((option) => option.value === value) || null
+            }
+            onChange={(e, newValue) => onChange(newValue?.value || "", name)}
+            isOptionEqualToValue={(option, value) =>
+              option.value === value.value
+            }
+            getOptionLabel={(option) => option.text || ""}
+            renderInput={(params) => (
+              <TextField
+                {...params}
+                name={name}
+                placeholder="Select"
+                variant="outlined"
+                error={
+                  errors && Object.values(errors)?.some((error) => !!error)
+                }
+              />
+            )}
+          />
         </FieldShell>
       );