TextField with type date - intended or error when using label
Nobody has claimed this yet.
- Dominant language
- JavaScript
- Stars
- 99.1k
- Forks
- 32.5k
- Avg merge
- 2d 17h
- Merged PRs (30d)
- 106
Description
Duplicates
- I have searched the existing issues
Latest version
- I have tested the latest version
Current behavior 😯
Using the component <TextField type="text" label="myLabel" placeholder="myPlaceholder" /> leads to the having the label and a date mask to overwrite each other.
Expected behavior 🤔
I would expect the element only to show the label and eventually the date format when an invalid date has been used or as a tooltip.
Steps to reproduce 🕹
https://codesandbox.io/s/useformcontrol-material-demo-forked-270g0?file=/demo.tsx:230-306
import * as React from "react";
import TextField from "@mui/material/TextField";
import Box from "@mui/material/Box";
export default function UseFormControl() {
return (
<Box component="form" noValidate autoComplete="off">
<TextField type="text" label="myLabel" placeholder="myPlaceholder" />
<br/>
<TextField type="date" label="myLabel" placeholder="myPlaceholder" />
</Box>
);
}
Context 🔦
No response
Your environment 🌎
`npx @mui/envinfo`
System:
OS: macOS 12.1
CPU: (8) x64 Intel(R) Core(TM) i7-8559U CPU @ 2.70GHz
Memory: 463.25 MB / 16.00 GB
Shell: 5.8 - /bin/zsh
Binaries:
Node: 16.13.2 - ~/.nvm/versions/node/v16.13.2/bin/node
npm: 8.3.1 - ~/.nvm/versions/node/v16.13.2/bin/npm
Watchman: 2022.01.03.00 - /usr/local/bin/watchman
Managers:
CocoaPods: 1.9.1 - /usr/local/bin/pod
Homebrew: 3.3.10 - /usr/local/bin/brew
pip3: 21.3.1 - ~/.pyenv/shims/pip3
RubyGems: 3.0.3.1 - /usr/bin/gem
Utilities:
CMake: 3.22.1 - /usr/local/bin/cmake
Make: 3.81 - /usr/bin/make
GCC: 4.2.1 - /usr/bin/gcc
Git: 2.32.0 - /usr/bin/git
Clang: 13.0.0 - /usr/bin/clang
Subversion: 1.14.1 - /usr/local/bin/svn
Servers:
Apache: 2.4.51 - /usr/sbin/apachectl
Virtualization:
Docker: 20.10.12 - /usr/local/bin/docker
SDKs:
iOS SDK:
Platforms: DriverKit 21.2, iOS 15.2, macOS 12.1, tvOS 15.2, watchOS 8.3
IDEs:
Nano: 2.0.6 - /usr/bin/nano
VSCode: 1.63.2 - /Applications/Visual Studio Code.app/Contents/Resources/app/bin/code
Vim: 8.2 - /usr/bin/vim
Xcode: 13.2.1/13C100 - /usr/bin/xcodebuild
Languages:
Bash: 3.2.57 - /bin/bash
Java: 11.0.10 - /usr/bin/javac
Perl: 5.34.0 - /usr/local/bin/perl
Python: 3.10.0 - /Users/doberkofler/.pyenv/shims/python
Python3: 3.10.0 - /Users/doberkofler/.pyenv/shims/python3
Ruby: 2.6.8 - /usr/bin/ruby
Databases:
SQLite: 3.36.0 - /usr/bin/sqlite3
Browsers:
Chrome: 97.0.4692.99
Safari: 15.2
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Begin with the TextField examples in the linked CodeSandbox, comparing type="text" and type="date" with a label and placeholder. Confirm the behavior in the current version and clarify whether the label/date-mask overlap is intended; done means the expected rendering or behavior is established and verified.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript, react
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100