Skip to content

[pickers] Support For Backspace behavior in Date input clears only part of the year instead of the full year #20776

@AravinthK820

Description

@AravinthK820

When a date is selected (e.g. 12/12/2000) and displayed in the input field, placing the cursor at the end of the input and pressing Backspace does not clear the year correctly.

Current behavior:

  • Selected date: 12/12/2000
  • Cursor placed at the end of the input
  • Pressing Backspace once changes the value to:
    12/12/0200
  • The year is partially modified instead of being fully cleared.
  • Only after the year becomes fully selected does pressing Backspace clear the entire year.

Expected behavior:

  • On the first Backspace press, the entire year (YYYY) should be cleared.
  • Result should be:
    12/12/YYYY

This behavior is inconsistent with typical date input editing expectations and can be confusing for users.


Steps to Reproduce

  1. Select a date (e.g. 12/12/2000) using the MUI Date Picker.
  2. Focus the input field.
  3. Place the cursor at the end of the date value.
  4. Press Backspace once.

Expected Result

  • The year portion (YYYY) is cleared immediately.

Actual Result

  • The year changes to 0200 instead of being fully cleared.

Environment

  • MUI version: 8.2.30
  • Browser: Chrome
  • React version: 19^

Metadata

Metadata

Assignees

No one assigned

    Labels

    scope: pickersChanges related to the date/time pickers.status: waiting for maintainerThese issues haven't been looked at yet by a maintainer.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions