mdb-date-picker how to set focus on something within the dat

Topic: mdb-date-picker how to set focus on something within the date picker modal

matt5733 free asked 2 years ago

Using MDBootstrap 4 Datepicker control within an Angular 10 application, I am attempting to set focus to something/anything within the date picker modal window after it loads so the user has a good keyboard navigation experience. I am currently experiencing a behavior that allows the user to keyboard tab navigate on the form in the background of the datepicker modal after the it loads. I want to explicitly set focus to something in the date picker modal to get around this problem. I have not found a solution to this yet.

The MDBDatePickerComponent has a property called "divFocus" of type "any" but I have found no documentation of what it is used for. It looks promising but I don't even know what it is suppose to be used for due to lack of documentation. Perhaps there is another way to accomplish this.

I have also tried something like this with no luck thus far....

@ViewChild('datePicker', { static: true }) initialFocus: ElementRef; ... this.initialFocus.nativeElement.focus();

Resources (screenshots, code snippets etc.)

Add comment

Arkadiusz Idzikowski staff answered 2 years ago

1 0 Best answer

Please insert min. 20 characters.

Here is an example showing how you can focus left arrow button after modal is opened:

HTML:

<mdb-date-picker (calendarToggle)="onToggle($event)"></mdb-date-picker>

TS:

  onToggle(event: any) {
    // event fired when modal is opened
    if (event === 1) {
      setTimeout(() => {
        const prevArrow = document.querySelector('.picker__nav--prev') as HTMLElement;
        prevArrow?.focus();
      }, 0);
    }
  }

This component should have focus trapped inside the picker container and first focusable element should be focused by default. I added this task to our to-do list and we will fix that on our end.

matt5733 free commented 2 years ago

Thanks for the response and answer. This answers my question. I am a little curious still as to what the "divFocus" property is suppose to be used for on the md-date-picker. Do you have any information on that? I didn't find anything in the docs about what it is used for. Thanks in advance.

Arkadiusz Idzikowski staff commented 2 years ago

@matt5733 This variable is a part of component private API, it was used to get access to the element from the component template. This is not something you should use or modify on your end.

Add comment

Write

Create snippet

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Resolved

Specification of the issue

ForumUser: Free
Premium support: No
Technology: MDB Angular
MDB Version: MDB4 10.0.0
Device: PC
Browser: Chrome
OS: Windows 10
Provided sample code: No
Provided link: No

matt5733

5Support score
1Questions 0Answers 0Snippets