Skip to content

Date Picker KB navigation with calendar doesn't work #14918

@damyanpetev

Description

@damyanpetev

Description

As for the Date Picker - that's another component issue. The entire KB nav of the date picker is broken:
https://www.infragistics.com/products/ignite-ui-angular/angular/components/date-picker#angular-datepicker-example Pick a value, focus does not return to the input.

Edit: Seems to be to do with the calendar stealing back focus after this handler has moved to the input, which causes the closing overlay to dump the focus to body when it's removed from the DOM. If that worked correctly, the focus should switch between the input & calendar - both within the grid container.

Yup, this seems to hit after the calendar has emitted change (also on mouse down for some reason, inner day item) and the picker has started closing and moved focus away:

protected onMouseDown(event: MouseEvent) {
event.stopPropagation();
this.wrapper.nativeElement.focus();
}

Guessing some refactoring happened that changed the internal focus handling of the calendar in a way that didn't occur before and regressed the picker handling.

Originally posted by @damyanpetev in #14894 (comment)

  • igniteui-angular version: 18.1.x at least
  • browser: N/A

Steps to reproduce

  1. Open https://stackblitz.com/edit/nemx8b
  2. Focus the Date Picker
  3. Open the calendar
  4. Select a date
  5. Observe the focused element (arrow up/down scroll the entire view)

OR
2. Focus the Date Picker
3. Press Alt + Down to open the calendar
4. Attempt to navigate the calendar

Result

The focus isn't returned to the date picker input in the first case. Focus doesn't transfer to the calendar in the second and thus KB nav doesn't work.

Expected result

The focus isn't returned to the date picker input in the first case. Focus doesn't transfer to the calendar in the second and thus KB nav doesn't work.

Metadata

Metadata

Type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions