Topic: Modal button is not clicked when pressing Enter key
Expected behavior
https://mdbootstrap.com/docs/angular/modals/basic/
Pressing the ENTER key should click default button, instead of forcing use of mouse button
Actual behavior
Modal button is not clicked when pressing Enter key
Resources (screenshots, code snippets etc.)
Add a reference variable to the element you want to focus, for example: #closeButton
<button type="button" #closeButton class="close pull-right" aria-label="Close" (click)="basicModal.hide()">
<span aria-hidden="true">×</span>
</button>
Declared a variable in the component:
@ViewChild('closeButton') closeButton;
And finally:
this.closeButton.nativeElement.focus();
That doesn't work
Probably because I don't mean the top close button but rather an mdbBtn at the bottom of the modal. see this: https://imgur.com/a/nQLWogp
<button mdbBtn #button1 [color]="primary" (click)="submit()">
Click Me !
</button>
Furthermore, this.button1 is recognized in ngOnChanges only if wrapped by:
setTimeout(() => {
this.button1.nativeElement.focus();
}, 0);
I also use this:
@ViewChild('button1', { static: false }) button1: ElementRef;
Please advise
Grzegorz Bujański staff commented 4 years ago
I suggest you use the example of listen to events and add it to the opened event: https://mdbootstrap.com/docs/angular/modals/basic/#listen-to-events
The issue is that (click)="openModal()" is not called when Enter key is pressed. Only when mouse clicked
Grzegorz Bujański staff commented 4 years ago
I checked it and the modal also opens after pressing the key. How can we recreate this problem? Describe exactly under the first post what you have already done, and what exactly is not working for you, if there are any errors in the console, paste their content. Please also send us your code so that we can recreate this issue.
itay pro commented 4 years ago
The button is not clicked because it is not focused, that's all The code you sent doesn't help because the x close button steals focus and .nativeElement.focus() doesn't work probably because mdbBtn directive
Arkadiusz Idzikowski staff commented 4 years ago
If you want to focus an element that is outside the modal while the modal is opened, then it's not possible because the focus will be trapped inside the modal. This behavior is in line with the accessibility guidelines for modals.
itay pro commented 4 years ago
The element is in the modal of course Please check 2 attached images
Arkadiusz Idzikowski staff commented 4 years ago
Please update your first post and add all the HTML/TS code that we need to reproduce this problem on our end. We tested it on our end and it looked like everything is working correctly. The focus is trapped inside the modal but not attached only to one element.
We won't be able to help in this case without additional information.
Success,
After not getting a good answer, I tried again:
- I tried placing
this.button1.nativeElement.focus();insidengAfterViewInit(). Didn't help I re-tried placing
this.button1.nativeElement.focus();insidesetTimeout(() => { this.button1.nativeElement.focus(); }, 0);
didn't work.
- I tried 500 for timeout, didn't work
- I search the internet and found the use of
read: ElementRefwhich nailed it !
@ViewChild('button1', { static: false, read: ElementRef }) button1: ElementRef;
setTimeout(() => { this.button1.nativeElement.focus(); }, 500);
500 for timeout is also needed, probably due to modal animation
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- User: Pro
- Premium support: No
- Technology: MDB Angular
- MDB Version: 9.3.1
- Device: NA
- Browser: NA
- OS: NA
- Provided sample code: No
- Provided link: Yes
Grzegorz Bujański staff commented 4 years ago
At the moment, after open modal and pressing the enter key, nothing happens. Only when the button is focused, pressing enter works. You can focus the button using the tab key.
itay pro commented 4 years ago
How can I focus programatically ?