Open jerrickhakim opened 1 month ago
Can you create a minimal reproduction with the code too? It would help us debug.
Since the issue is missing key information and has been inactive for 7 days, it has been automatically closed. If you wish to see the issue reopened, please provide the missing information.
"use client";
// React
import { useRef, useState } from "react";
// Formkit
import { Formik } from "formik";
// UI
import TextField from "@mui/material/TextField";
import LoadingButton from "@mui/lab/LoadingButton";
// MUI
import Visibility from "@mui/icons-material/Visibility";
import VisibilityOff from "@mui/icons-material/VisibilityOff";
import InputAdornment from "@mui/material/InputAdornment";
import IconButton from "@mui/material/IconButton";
export default function LoginForm({ onSuccess = false, redirect = false }) {
// Form ref
const form = useRef();
const [showPassword, setShowPassword] = useState(false);
//
// Form Submit Event
//
const handleSubmit = async ({ email, password }) => {
};
const handleClickShowPassword = () => setShowPassword((show) => !show);
return (
<Formik
className="w-full"
initialValues={{ email: "", password: "" }}
validate={(values) => {
const errors = {};
if (!values.email) {
errors.email = "Email is required";
} else if (
!/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i.test(values.email)
) {
errors.email = "Invalid email";
}
if (!values.password) {
errors.password = "Password is required";
}
return errors;
}}
onSubmit={(values, { setSubmitting }) => {
setTimeout(() => {
handleSubmit(values);
setSubmitting(false);
}, 400);
}}
>
{({
values,
errors,
touched,
handleChange,
handleBlur,
handleSubmit,
isSubmitting,
}) => (
<form onSubmit={handleSubmit} className="w-full" ref={form}>
<TextField
fullWidth
color="input"
id="email"
label="Email*"
variant="outlined"
autoComplete="current-username"
placeholder="who@example.com"
onBlur={handleBlur}
onChange={handleChange}
value={values.email}
error={errors.email && touched.email}
helperText={errors.email && touched.email && errors.email}
sx={{
mb: 2,
}}
/>
<TextField
fullWidth
color="input"
id="password"
label="Password"
autoComplete="current-password"
variant="outlined"
onBlur={handleBlur}
onChange={handleChange}
sx={{
mb: 2,
}}
type={showPassword ? "text" : "password"}
InputProps={{
endAdornment: (
<InputAdornment position="end">
<IconButton
aria-label="toggle password visibility"
onClick={handleClickShowPassword}
edge="end"
>
{showPassword ? <VisibilityOff /> : <Visibility />}
</IconButton>
</InputAdornment>
),
}}
value={values.password}
error={errors.password && touched.password}
helperText={errors.password && touched.password && errors.password}
/>
<LoadingButton
fullWidth
loading={isSubmitting}
disabled={isSubmitting}
type="submit"
variant="contained"
size="large"
sx={{
textTransform: "none",
}}
>
Login
</LoadingButton>
</form>
)}
</Formik>
);
}
Any progress? I have the same problem. When I remove the fieldset element in Outlined from the html, it works correctly.
On text field component.
When the variant is set to outline and the auto complete prop is set upon clicking the auto complete suggestion on iOS the next input in the dom is not focused.
Filled and standard variants work as expected.
Here's is a example on the themes store I've also located:
https://minimals.cc/auth-demo/split/sign-up
https://github.com/mui/material-ui/assets/35478687/b886760d-f808-4fd4-9a20-658048f7057b
Search keywords: