Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

form is invalid when using autocomplete #491

Open
abrenner94 opened this issue Jun 14, 2020 · 1 comment
Open

form is invalid when using autocomplete #491

abrenner94 opened this issue Jun 14, 2020 · 1 comment

Comments

@abrenner94
Copy link

abrenner94 commented Jun 14, 2020

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>;
@felixmosh
Copy link
Contributor

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants