Topic: Modal button is not clicked when pressing Enter key

itay pro asked 3 years ago

Expected behavior

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.)

Grzegorz Bujański staff commented 3 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 3 years ago

How can I focus programatically ?

itay pro answered 3 years ago


After not getting a good answer, I tried again:

  1. I tried placing this.button1.nativeElement.focus(); inside ngAfterViewInit(). Didn't help
  2. I re-tried placing this.button1.nativeElement.focus(); inside

    setTimeout(() => { this.button1.nativeElement.focus(); }, 0);

didn't work.

  1. I tried 500 for timeout, didn't work
  2. I search the internet and found the use of read: ElementRef which 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

itay pro answered 3 years ago

The issue is that (click)="openModal()" is not called when Enter key is pressed. Only when mouse clicked

Grzegorz Bujański staff commented 3 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 3 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 3 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 3 years ago

The element is in the modal of course Please check 2 attached images

Arkadiusz Idzikowski staff commented 3 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.

itay pro answered 3 years ago

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:

<button mdbBtn #button1 [color]="primary" (click)="submit()">
  Click Me !

Furthermore, this.button1 is recognized in ngOnChanges only if wrapped by:

setTimeout(() => {
    }, 0);

I also use this:

  @ViewChild('button1', { static: false }) button1: ElementRef;

Please advise

Grzegorz Bujański staff commented 3 years ago

I suggest you use the example of listen to events and add it to the opened event:

Grzegorz Bujański staff answered 3 years ago

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>

Declared a variable in the component:

@ViewChild('closeButton') closeButton;

And finally:


Please insert min. 20 characters.


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



Specification of the issue

  • ForumUser: 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