mui / mui/material-ui

[TextField] `datetime-local` input clears if no time is specified

Open
#31,121 11 comments 1 reaction 0 assignees View on GitHub

Nobody has claimed this yet.

external dependency scope: text field type: expected behavior
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 😯

When the user inputs the date without time in an Input type datetime-local and he moves the focus out of the input, the input will be cleared.

mui-bug-input-datetime-local-clears

Expected behavior 🤔

When the user inputs the date without time in an Input type datetime-local and he moves the focus out of the input, the input maintains the state.

Steps to reproduce 🕹

Steps:

  1. The user enters a date without time in the MUI Input type datetime-local
  2. The user moves the focus out of the input
  3. The input state is cleared

codesandbox: https://codesandbox.io/s/mui-materialui-bug-input-datetime-local-clears-qcms0o

Context 🔦

To maintain the input state when if the input loses focus. (just like in the native HTML5 input implementation)

Your environment 🌎
`npx @mui/envinfo` 
  System:
    OS: macOS 12.2.1
    CPU: (12) x64 Intel(R) Core(TM) i7-8850H CPU @ 2.60GHz
    Memory: 1.08 GB / 32.00 GB
    Shell: 5.8 - /bin/zsh
  Binaries:
    Node: 16.13.2 - ~/.asdf/installs/nodejs/16.13.2/bin/node
    Yarn: 1.22.15 - ~/.asdf/installs/yarn/1.22.15/bin/yarn
    npm: 8.1.2 - ~/.asdf/plugins/nodejs/shims/npm
  Managers:
    Homebrew: 3.3.14 - /usr/local/bin/brew
    pip3: 21.3.1 - ~/projects/alpha/.direnv/python-3.9.9-venv/bin/pip3
    RubyGems: 3.0.3.1 - /usr/bin/gem
  Utilities:
    Make: 3.81 - /usr/bin/make
    GCC: 4.2.1 - /usr/bin/gcc
    Git: 2.35.0 - /usr/local/bin/git
    Clang: 13.0.0 - /usr/bin/clang
  Servers:
    Apache: 2.4.51 - /usr/sbin/apachectl
  Virtualization:
    Docker: 20.10.12 - /usr/local/bin/docker
  IDEs:
    Nano: 2.0.6 - /usr/bin/nano
    Vim: 8.2 - /usr/local/bin/vim
    Xcode: /undefined - /usr/bin/xcodebuild
  Languages:
    Bash: 5.1.16 - /usr/local/bin/bash
    Java: 11.0.14 - /Users/jesus.gonzalez/.asdf/installs/java/zulu-11.54.23/bin/javac
    Perl: 5.34.0 - /usr/local/bin/perl
    Python: 3.9.9 - /Users/jesus.gonzalez/project/.direnv/python-3.9.9-venv/bin/python
    Python3: 3.9.9 - /Users/jesus.gonzalez/project/.direnv/python-3.9.9-venv/bin/python3
    Ruby: 2.6.8 - /usr/bin/ruby
  Databases:
    SQLite: 3.36.0 - /usr/bin/sqlite3
  Browsers:
    Chrome: 98.0.4758.102
    Safari: 15.3

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start with the linked CodeSandbox and reproduce the date-only entry in the MUI TextField/Input with type datetime-local, then inspect how the input handles focus loss. Compare the behavior with the native HTML5 input; done means the entered date remains visible after focus leaves the field.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript, react
Domain
frontend
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Quiet
Clarity
Mostly clear
Newbie friendliness
55/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.