Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

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

See original GitHub issue

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:

The user enters a date without time in the MUI Input type datetime-local
The user moves the focus out of the input
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

Issue Analytics

State:
Created 2 years ago
Reactions:1
Comments:8 (3 by maintainers)

Top GitHub Comments

3reactions

abhinav-22-techcommented, Mar 1, 2022

@Jesus-Gonzalez Okay, I understand your issue. I will try to solve this problem.

2reactions

RichieLinnellcommented, Mar 21, 2022

Any progress fixing this one?

Top Results From Across the Web

Is there a prevent the input clear when using material-ui ...

You have to set the initial value to TextField component and it should have a value prop like below: <TextField type="datetime-local" ...

<input type="datetime-local"> - HTML - MDN Web Docs

This value must specify a date string later than or equal to the one specified by the min attribute. min. The earliest date...

HTML input type="datetime-local" - W3Schools

Definition and Usage. The <input type="datetime-local"> defines a date picker. The resulting value includes the year, month, day, and time.

ion-datetime

Datetimes are similar to the native input elements of datetime-local , however, Ionic Framework's Datetime component makes it easy to display the date...

type - Cypress Documentation

Text passed to .type() may include any of the special character sequences ... Using .type() on a time input ( <input type="time"> )...