From dbcd75029a58e5262db33d29733cae3e43a99f54 Mon Sep 17 00:00:00 2001
From: "geodem.dev" <74890703+geodem127@users.noreply.github.com>
Date: Thu, 16 Jan 2025 01:34:09 +0800
Subject: [PATCH] 2947-Dropdown-Field-Change-to-Autocomplete (#3126)

---
 .../src/app/components/Editor/Field/Field.tsx | 40 ++++++++++++-------
 1 file changed, 25 insertions(+), 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
index 108535b75..6f7f036bb 100644
--- 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>
       );