Topic: mdb-date-picker how to set focus on something within the date picker modal
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.)
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 commented 4 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 3 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.
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Resolved
- User: 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