Topic: Modal button is not clicked when pressing Enter key

itay pro asked 4 years ago


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

https://imgur.com/a/rpiTMHU


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 ?


itay pro answered 4 years ago


Success,

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


itay pro answered 4 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: 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


Grzegorz Bujański staff answered 4 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>
    </button>

Declared a variable in the component:

@ViewChild('closeButton') closeButton;

And finally:

this.closeButton.nativeElement.focus();


Please insert min. 20 characters.

FREE CONSULTATION

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

Status

Answered

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
Tags