material-components / material-components/material-web

Input component with type="datetime-local" and step="1" behaves wrong

Open
#5,708 2 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Dominant language
SCSS
Stars
11.3k
Forks
1.1k
Avg merge
20h 28m
Merged PRs (30d)
13

Description

### What is affected?

Component

### Description

The hour-selector in an input with type="datetime-local" and step="1" does not allow to write a 2 digit number with the keyboard.

### Reproduction

Here is a Gist that does not work.
https://lit.dev/playground/#gist=3eedd3e52aa191e027d059e26869ff5e

I does work for some users, but not all. I have customers complaining about the behavior.

![hours_00_2x](https://github.com/user-attachments/assets/0f28538d-44fe-4b3f-9548-e954f42dfcaa)

### Workaround

The workaround is to use the keyboard up/down to change the digit to its right value

### Is this a regression?

No or unsure. This never worked, or I haven't tried before.

### Affected versions

Current

### Browser/OS/Node environment

Browser: Chrome and Edge
OS: Windows

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 by reproducing the linked Lit Playground Gist in Chrome and Edge on Windows, focusing on the hour-selector for an input with type="datetime-local" and step="1". Trace the affected component from the reproduction and verify that typing a two-digit hour works consistently without relying on the keyboard up/down workaround.

Written by the indexing model from the issue text.

Assessment

Tech stack
html
Domain
frontend, web-dev
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.