return of the autocomplete! (and remove spellcheck on names) (#296) (#297)

src/app/components/app/modal-container/modal/form-container/card-form/fields/card-holder/card-holder.tsx

@@ -24,6 +24,8 @@ const getCustomInput = (props: CardHolderProps, fieldProps: WrappedFieldProps) =
         mark={true}
         id="card-holder-input"
         onInput={formatCardHolder}
+        autocomplete="cc-name"
+        spellcheck={false}
     />
 );
 

src/app/components/app/modal-container/modal/form-container/card-form/fields/card-number/card-number.tsx

@@ -37,6 +37,7 @@ const getCardNumberInput = (props: CardNumberProps, fieldProps: WrappedFieldProp
         type="tel"
         id="card-number-input"
         onInput={formatCardNumber}
+        autocomplete="cc-number"
     />
 );
 

src/app/components/app/modal-container/modal/form-container/card-form/fields/expire-date/expire-date.tsx

@@ -25,6 +25,7 @@ const getCustomInput = (props: ExpireDateProps, fieldProps: WrappedFieldProps) =
         type="tel"
         id="expire-date-input"
         onInput={formatExpiry}
+        autocomplete="cc-exp"
     />
 );
 

src/app/components/app/modal-container/modal/form-container/card-form/fields/secure-code/secure-code.tsx

@@ -28,6 +28,7 @@ const getCustomInput = (props: SecureCodeProps, fieldProps: WrappedFieldProps) =
         mark={true}
         type={props.obscureCardCvv ? 'password' : 'tel'}
         id="secure-code-input"
+        autocomplete="cc-csc"
     />
 );
 

src/app/components/app/modal-container/modal/form-container/common-fields/email/email.tsx

@@ -25,6 +25,7 @@ const getCustomInput = (props: EmailDefProps, fieldProps: WrappedFieldProps) =>
         type="email"
         id="email-input"
         onInput={formatEmail}
+        autocomplete="email"
     />
 );
 

src/app/components/app/modal-container/modal/form-container/common-fields/phone/phone.tsx

@@ -26,6 +26,7 @@ const getCustomInput = (props: PhoneProps, fieldProps: WrappedFieldProps) => (
         id="phone-input"
         onInput={formatPhoneNumber}
         onFocus={formatPhoneNumber}
+        autocomplete="tel"
     />
 );
 

src/app/components/app/modal-container/modal/form-container/input/input.tsx

@@ -86,6 +86,8 @@ export interface CustomProps {
     type?: 'text' | 'number' | 'value' | 'tel' | 'email' | 'password';
     id?: string;
     onInput?: React.FormEventHandler<HTMLInputElement>;
+    autocomplete?: string;
+    spellcheck?: boolean;
 }
 
 type InputProps = WrappedFieldInputProps & WrappedFieldMetaProps & CustomProps;
@@ -104,6 +106,8 @@ export const Input: React.FC<InputProps> = (props) => (
             type={props.type}
             value={props.value}
             id={props.id}
+            autoComplete={props.autocomplete}
+            spellCheck={props.spellcheck}
         />
         {props.mark && <Marks active={props.active} pristine={props.pristine} error={props.error} />}
     </InputWrapper>