TextField with type date - intended or error when using label

[doberkofler]

Duplicates

• [X] I have searched the existing issues

Latest version

• [X] 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 ```

[dryrainbow]

I want to fix it I can just hide the date format placeholder and show it when the focus is on the input

[doberkofler]

Sounds good to me

[dryrainbow]

@doberkofler I've discovered that this problem was described in the documentation https://mui.com/components/text-fields/#shrink Can it help you for a while?

[doberkofler]

@dryrainbow Yes, this helps