Add defaultValue on each form component

src/components/MuiRhfAutocompleteMultiple.tsx

@@ -0,0 +1,28 @@
+import * as React from "react";
+
+import { TextFieldProps } from "@material-ui/core";
+
+import { MuiRhfFieldProps } from "~/models/fields";
+
+import MuiRhfAutocomplete from "./MuiRhfAutocomplete";
+
+type MuiRhfAutocompleteProps = MuiRhfFieldProps & {
+  defaultValue?: unknown;
+  textField?: Omit<TextFieldProps, "onChange">;
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  autocomplete?: any;
+};
+
+const MuiRhfAutocompleteMultiple: React.FC<MuiRhfAutocompleteProps> = ({
+  defaultValue = [],
+  autocomplete: autocompleteProps = {},
+  ...rest
+}) => (
+  <MuiRhfAutocomplete
+    {...rest}
+    autocomplete={{ ...autocompleteProps, multiple: true }}
+    defaultValue={defaultValue}
+  />
+);
+
+export default MuiRhfAutocompleteMultiple;

src/components/MuiRhfAutocompleteSingle.tsx

@@ -0,0 +1,28 @@
+import * as React from "react";
+
+import { TextFieldProps } from "@material-ui/core";
+
+import { MuiRhfFieldProps } from "~/models/fields";
+
+import MuiRhfAutocomplete from "./MuiRhfAutocomplete";
+
+type MuiRhfAutocompleteProps = MuiRhfFieldProps & {
+  defaultValue?: unknown;
+  textField?: Omit<TextFieldProps, "onChange">;
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  autocomplete?: any;
+};
+
+const MuiRhfAutocompleteSingle: React.FC<MuiRhfAutocompleteProps> = ({
+  defaultValue = null,
+  autocomplete: autocompleteProps = {},
+  ...rest
+}) => (
+  <MuiRhfAutocomplete
+    {...rest}
+    autocomplete={{ ...autocompleteProps, multiple: false }}
+    defaultValue={defaultValue}
+  />
+);
+
+export default MuiRhfAutocompleteSingle;

src/components/MuiRhfCheckbox.tsx

@@ -15,7 +15,7 @@ const MuiRhfCheckbox: React.FC<MuiRhfCheckboxProps> = ({
   control,
   errors,
   name,
-  defaultValue,
+  defaultValue = false,
   label,
   required,
   disabled,

src/components/MuiRhfSelect.tsx

@@ -17,7 +17,7 @@ const MuiRhfSelect: React.FC<MuiRhfSelectProps> = ({
   errors,
   name,
   label,
-  defaultValue,
+  defaultValue = "",
   options,
   select: selectProps,
 }) => (

src/components/MuiRhfTextField.tsx

@@ -10,7 +10,7 @@ const MuiRhfTextField: React.FC<MuiRhfTextFieldProps> = ({
   control,
   errors,
   name,
-  defaultValue,
+  defaultValue = "",
   ...rest
 }) => (
   <Controller

src/components/index.tsx

@@ -2,12 +2,12 @@ import MuiRhfForm from "./MuiRhfForm";
 import MuiRhfTextField from "./MuiRhfTextField";
 import MuiRhfSelect from "./MuiRhfSelect";
 import MuiRhfCheckbox from "./MuiRhfCheckbox";
-import MuiRhfAutocomplete from "./MuiRhfAutocomplete";
+import MuiRhfAutocompleteSingle from "./MuiRhfAutocompleteSingle";
 
 export {
   MuiRhfForm,
   MuiRhfTextField,
   MuiRhfSelect,
   MuiRhfCheckbox,
-  MuiRhfAutocomplete,
+  MuiRhfAutocompleteSingle,
 };

src/models/form/consts.ts

@@ -1,13 +1,15 @@
 import MuiRhfTextField from "~/components/MuiRhfTextField";
 import MuiRhfSelect from "~/components/MuiRhfSelect";
 import MuiRhfCheckbox from "~/components/MuiRhfCheckbox";
-import MuiRhfAutocomplete from "~/components/MuiRhfAutocomplete";
+import MuiRhfAutocompleteSingle from "~/components/MuiRhfAutocompleteSingle";
+import MuiRhfAutocompleteMultiple from "~/components/MuiRhfAutocompleteMultiple";
 
 import { MuiRhfFieldComponentMap } from "./typing";
 
 export const fieldComponentMap: MuiRhfFieldComponentMap = {
   textField: MuiRhfTextField,
   select: MuiRhfSelect,
   checkbox: MuiRhfCheckbox,
-  autocomplete: MuiRhfAutocomplete,
+  autocompleteSingle: MuiRhfAutocompleteSingle,
+  autocompleteMultiple: MuiRhfAutocompleteMultiple,
 };

src/models/form/typing.ts

@@ -15,7 +15,8 @@ export type MuiRhfFieldComponentMap = {
   textField: React.FC<MuiRhfTextFieldProps>;
   select: React.FC<MuiRhfSelectProps>;
   checkbox: React.FC<MuiRhfCheckboxProps>;
-  autocomplete: React.FC<MuiRhfAutocompleteProps>;
+  autocompleteSingle: React.FC<MuiRhfAutocompleteProps>;
+  autocompleteMultiple: React.FC<MuiRhfAutocompleteProps>;
 };
 
 /** Form */