[Bug] Text overlapped in the FormField component

[wangjian1106]

Version

2.2.0

Reproduction link

Operating System

macOS Sonoma 14.1.2

Device

Macbook Pro M2

Browser & Version

Google Chrome 122.0.6261.94

Steps to reproduce

1. Open file /src/layouts/pages/users/new-user/schemas/form.js
2. Change form.formField.company.type from "text" to "date"
3. Execute "npm start" to run the application
4. Click "Pages -> Users -> New User" to open the page
5. Check the date picker

What is expected?

Only label shows in the the FormField component when the FormField component is not focused.

What is actually happening?

Both label and date format shows in the the FormField component when the FormField component is not focused. The label and date format overlapped.

Screenshots

case: variant="standard"

case: variant="outlined"

case: variant="outlined" with error

Note that the error mark is also overlapped with the date picker button at the right side of the FormField component.

---

Solution

Additional comments

My computer's language is Chinese, and the date format in the FormField component is 年/月/日.