formsy-react icon indicating copy to clipboard operation
formsy-react copied to clipboard

form is invalid when using autocomplete

Open abrenner94 opened this issue 5 years ago • 1 comments

hi,

If defaultValue is an empty string and you use Autofill e.g. with Chrome, you will get a disabled Submit button. The form is still invalid until you click on the page. Then the form is valid. Does anyone have a solution for this problem?

<Formsy
  onValidSubmit={handleSubmit}
  onValid={enableButton}
  onInvalid={disableButton}
  ref={formRef}
  className="flex flex-col justify-center w-full">
  <TextFieldFormsy
    className="mb-16"
    type="text"
    name="email"
    label="email"
    value=""
    validations="isEmail"
    validationErrors={{
      minLength: 'please use a valid email address',
    }}
    InputProps={{
      endAdornment: (
        <InputAdornment position="end">
          <Icon className="text-20" color="action">
            email
          </Icon>
        </InputAdornment>
      ),
    }}
    variant="outlined"
    required
  />

  <TextFieldFormsy
    className="mb-16"
    type="password"
    name="password"
    label="Password"
    value=""
    validations={{
      minLength: 4,
    }}
    validationErrors={{
      minLength: 'min. 4!',
    }}
    InputProps={{
      className: 'pr-2',
      type: showPassword ? 'text' : 'password',
      endAdornment: (
        <InputAdornment position="end">
          <IconButton onClick={() => setShowPassword(!showPassword)}>
            <Icon className="text-20" color="action">
              {showPassword ? 'visibility' : 'visibility_off'}
            </Icon>
          </IconButton>
        </InputAdornment>
      ),
    }}
    variant="outlined"
    required
  />

  <Button
    type="submit"
    variant="contained"
    color="primary"
    className="w-full mx-auto mt-16 normal-case"
    aria-label="LOG IN"
    disabled={!isFormValid}
    value="legacy">
    LOGIN
  </Button>
</Formsy>;

abrenner94 avatar Jun 14 '20 18:06 abrenner94

@abrenner94 can you add minimal example in codesandbox.io which reproduces it?

felixmosh avatar Aug 11 '20 07:08 felixmosh