feat(app-signup): add empty option in SelectInput

eficode · Dec 31, 2020 · 4ea0e1d · 4ea0e1d
1 parent 2389fbe
commit 4ea0e1d
Show file tree

Hide file tree

Showing 4 changed files with 31 additions and 3 deletions.
diff --git a/packages/game-app/src/_shared/components/SelectInput/SelectInput.tsx b/packages/game-app/src/_shared/components/SelectInput/SelectInput.tsx
@@ -9,13 +9,30 @@ type Props = {
   onChange: React.ChangeEventHandler<HTMLSelectElement>;
   disabled?: boolean;
   errorMessage?: string | null;
+  emptyOption?: boolean;
+  emptyOptionLabel?: string;
 };
 
-const SelectInput: React.FC<Props> = ({ value, name, label, onChange, options, errorMessage, disabled }) => {
+const SelectInput: React.FC<Props> = ({
+  value,
+  name,
+  label,
+  onChange,
+  options,
+  errorMessage,
+  disabled,
+  emptyOption,
+  emptyOptionLabel,
+}) => {
   return (
     <div className="column">
       <label htmlFor={name}>{label}</label>
       <div className="row">
+        {emptyOption && emptyOptionLabel ? (
+          <option key="" value="">
+            {emptyOptionLabel}
+          </option>
+        ) : null}
         <select disabled={disabled || options.length === 0} name={name} id={name} value={value} onChange={onChange}>
           {options.map(o => {
             const value = typeof o === 'string' ? o : o.value;

diff --git a/packages/game-app/src/_shared/form/FormSelect/FormSelect.tsx b/packages/game-app/src/_shared/form/FormSelect/FormSelect.tsx
@@ -20,6 +20,8 @@ const FormSelect: React.FC<Props> = ({ name, label, options, disabled }) => {
     }
   }, [error, t]);
 
+  const emptyOptionLabel = t('general.emptyOptionLabel');
+
   const renderInput = useCallback(
     (props: ControllerRenderProps) => {
       return (
@@ -31,10 +33,12 @@ const FormSelect: React.FC<Props> = ({ name, label, options, disabled }) => {
           onChange={props.onChange}
           disabled={disabled}
           errorMessage={translatedError}
+          emptyOption
+          emptyOptionLabel={emptyOptionLabel}
         />
       );
     },
-    [translatedError, label, options, disabled],
+    [translatedError, label, options, disabled, emptyOptionLabel],
   );
 
   return (

diff --git a/packages/game-app/src/assets/i18n/en.ts b/packages/game-app/src/assets/i18n/en.ts
@@ -20,6 +20,7 @@ const translations = {
     errors: {
       required: 'This field is required',
     },
+    emptyOptionLabel: 'Select an option',
   },
 };
 

diff --git a/packages/game-app/src/signup/components/Signup/Signup.tsx b/packages/game-app/src/signup/components/Signup/Signup.tsx
@@ -11,7 +11,13 @@ type Props = {};
 
 const Signup: React.FC<Props> = () => {
   const methods = useForm<SignupInfo>({
-    defaultValues: {},
+    defaultValues: {
+      role: '',
+      email: '',
+      password: '',
+      devOpsMaturity: '',
+      repeatPassword: '',
+    },
     mode: 'onBlur',
     resolver: yupResolver(signupValidationSchema),
   });
-Original file line number
+Diff line change
@@ Expand Up / @@ -20,6 +20,7 @@ const translations = { @@
         errors: {
           required: 'This field is required',
         },
+        emptyOptionLabel: 'Select an option',
       },
     };
@@ Expand Down @@