add idtype combo

src/pages/authentication/auth-forms/CustomFormWizard.js

@@ -14,10 +14,12 @@ import {
   Typography,
   Select,
   FormGroup,
+  TextField,
 //   Paper
   // MenuItem
 } from '@mui/material';
 import {useForm,} from 'react-hook-form'
+import Autocomplete from "@mui/material/Autocomplete";
 
 // third party
 import { Formik } from 'formik';
@@ -58,6 +60,19 @@ const CustomFormWizard = (props) => {
         setLevel(strengthColorChi(temp));
     };
 
+    const [selectedIdDocType, setSelectedIdDocType] = useState(null);
+    // const [idDocTypeComboList, setIdDocTypeComboList] = useState([]);
+
+    const idDocTypeComboList = ["passport","HKID","CNID","BR","otherCert"];
+    // function updateUserList (){
+    //     const idList = getIdList(groupUserData);
+    //     if(!idList.includes(selectedUser.id)){
+    //         const userList = [...groupUserData, selectedUser];
+    //         setGroupUserData(userList);
+    //         console.log(userList);
+    //     }
+    // }
+
     // const checkFormData = (data) =>{
     //     const dataStatus = false;
     //     if (data.username)
@@ -339,24 +354,18 @@ const CustomFormWizard = (props) => {
                                     <Grid container>
                                         <Grid item xs={12} md={6} >
                                             <Stack spacing={1}  sx={{mr:{md:1},mb:{xs:1}}}>
-                                                <Select
-                                                    name = "idDocType"
-                                                    multiple
-                                                    displayEmpty
-                                                    value={""}
-                                                    onChange={handleChange}
-                                                    input={<OutlinedInput />}
-                                                    {...register("idDocType")}
-                                                    renderValue={(selected) => {
-                                                    if (selected.length === 0) {
-                                                        return "證件類別";
-                                                    }
-                                                    return selected.join(', ');
+                                                <Autocomplete
+                                                    disablePortal
+                                                    id="idDocType-combo"
+                                                    value={selectedIdDocType === null ? null : selectedIdDocType}
+                                                    options={idDocTypeComboList}
+                                                    onChange={(event, newValue) => {
+                                                        setSelectedIdDocType(newValue);
                                                     }}
-                                                    // MenuProps={MenuProps}
-                                                    inputProps={{ 'aria-label': 'Without label' }}
-                                                >
-                                                </Select>
+                                                    
+                                                    sx={{"& .MuiInputBase-root": { height: "41px" }}}
+                                                    renderInput={(params) => <TextField {...params} placeholder="證件類別" sx={{ height: "41px" }}/>}
+                                                />
                                             </Stack>
                                         </Grid>
                                         <Grid item xs={12} md={5}>
@@ -397,6 +406,7 @@ const CustomFormWizard = (props) => {
                                                     {...register("checkDigit")}
                                                     onChange={handleChange}
                                                     placeholder="( )"
+                                                    // sx={{height:"53px"}}
                                                     inputProps={{
                                                         maxLength: 1,
                                                         onKeyDown: (e) => {