InputLabelProps shrink not working
I have the following create component, that uses InputLabelProps with shrink rule listening to hook form, but when something is typed in the input, the label stays above the text typed. how can i fix it?
code below:
import React from "react";
import type { HttpError } from "@refinedev/core";
import { Breadcrumb, Create, EmailField } from "@refinedev/mui";
import Box from "@mui/material/Box";
import TextField from "@mui/material/TextField";
import { useForm } from "@refinedev/react-hook-form";
import { Typography } from "@mui/material";
import { Nullable } from "../../@types";
import { Controller } from "react-hook-form";
export const SpecialityCreate = () => {
const {
saveButtonProps,
register,
control,
formState: { errors },
getValues,
} = useForm<any, HttpError, Nullable<any>>();
return (
<Create
breadcrumb={<Breadcrumb hideIcons />}
saveButtonProps={saveButtonProps}
title={<Typography variant="h5">Crear especialidad</Typography>}
>
<Box
component="form"
sx={{ display: "flex", flexDirection: "column" }}
autoComplete="off"
>
<TextField
id="name"
{...register("name", {
required: "This field is required",
})}
error={!!errors.name}
margin="normal"
fullWidth
label="Nombre"
required
name="name"
autoFocus
InputLabelProps={{ shrink: !!getValues("name") }}
/>
<TextField
id="description"
{...register("description", {
required: "This field is required",
})}
error={!!errors.description}
margin="normal"
label="Descripción"
required
name="description"
InputLabelProps={{ shrink: !!getValues("description") }}
/>
</Box>
</Create>
);
};
code below:
import React from "react";
import type { HttpError } from "@refinedev/core";
import { Breadcrumb, Create, EmailField } from "@refinedev/mui";
import Box from "@mui/material/Box";
import TextField from "@mui/material/TextField";
import { useForm } from "@refinedev/react-hook-form";
import { Typography } from "@mui/material";
import { Nullable } from "../../@types";
import { Controller } from "react-hook-form";
export const SpecialityCreate = () => {
const {
saveButtonProps,
register,
control,
formState: { errors },
getValues,
} = useForm<any, HttpError, Nullable<any>>();
return (
<Create
breadcrumb={<Breadcrumb hideIcons />}
saveButtonProps={saveButtonProps}
title={<Typography variant="h5">Crear especialidad</Typography>}
>
<Box
component="form"
sx={{ display: "flex", flexDirection: "column" }}
autoComplete="off"
>
<TextField
id="name"
{...register("name", {
required: "This field is required",
})}
error={!!errors.name}
margin="normal"
fullWidth
label="Nombre"
required
name="name"
autoFocus
InputLabelProps={{ shrink: !!getValues("name") }}
/>
<TextField
id="description"
{...register("description", {
required: "This field is required",
})}
error={!!errors.description}
margin="normal"
label="Descripción"
required
name="description"
InputLabelProps={{ shrink: !!getValues("description") }}
/>
</Box>
</Create>
);
};
