Skip to content

feat(mat-datepicker): Allow mat-datepicker to be always visible #29301

Open
@angelaki

Description

@angelaki

Feature Description

Right now the datepicker shows only up on clicking the toggle button (or implementing some own logic). I'd love the picker to always show up if the bound control is focused.

I've tried to achieve this using a custom directive, but there are so many caveats. I'd like the focus to stay in the input and tabbing away to close it. But using the blur event doesn't work since selecting a date blurs the control, too.

Use Case

I want to make users aware of the possibility to just pick a date while keeping the comfort of filling a form by keyboard / tab only.

Activity

added
featureThis issue represents a new feature or feature request rather than a bug or bug fix
needs triageThis issue needs to be triaged by the team
on Jun 22, 2024
crisbeto

crisbeto commented on Jun 24, 2024

@crisbeto
Member

Right now the datepicker shows only up on clicking the toggle button (or implementing some own logic). I'd love the picker to always show up if the bound control is focused.

This should be possible already by calling the open method in the focus handler.

I've tried to achieve this using a custom directive, but there are so many caveats. I'd like the focus to stay in the input and tabbing away to close it. But using the blur event doesn't work since selecting a date blurs the control, too.

Do you mean opening the calendar while still keeping focus in the input, or using a datepicker input without a calendar? The former would break the accessibility of the datepicker since the user wouldn't know that the popup is there.

angelaki

angelaki commented on Jun 26, 2024

@angelaki
Author

Using the open method in focus moves the focus to the picker. So the user won't be able to just enter a date by keyboard. And yes, moving the focus back to the input works but breaks the accessibility a bit - just to name one of the caveats.

I want the picker to show up if the input is focused. No overlay, nothing. Just the option / hint to be able to pick a date with the mouse or keep on entering by keyboard and tabbing to the next input control.

wagnermaciel

wagnermaciel commented on Oct 18, 2024

@wagnermaciel
Contributor

@crisbeto I think this fell off your radar

added
needs: clarificationThe issue does not contain enough information for the team to determine if it is a real bug
and removed
needs triageThis issue needs to be triaged by the team
on Oct 18, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    area: material/datepickerfeatureThis issue represents a new feature or feature request rather than a bug or bug fixneeds: clarificationThe issue does not contain enough information for the team to determine if it is a real bug

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

      Development

      No branches or pull requests

        Participants

        @crisbeto@wagnermaciel@angelaki

        Issue actions

          feat(mat-datepicker): Allow mat-datepicker to be always visible · Issue #29301 · angular/components