0

When I press tab to navigate through controls on screen (for an Angular app), it includes disabled controls in the tab sequence, when using this Angular mechanism for conditionally disabling a control:

<button [disabled]="!this.myForm.valid">

The problem is that if I also include a click event handler...

<button (click)="saveForm()" [disabled]="!this.myForm.valid">

...while it is true that you cannot activate the click-handler with a mouse-click you can activate it by pressing return (enter)!

That is a poor user experience; when the button is disabled by an expression such as that shown, I want it to be (a) either completely unfocusable or (b) able to ignore pressing enter. Any suggestions?

(Perhaps there is something in my codebase exacerbating this but to me the above looks like default Angular behavior.

Michael Sorens
  • 35,361
  • 26
  • 116
  • 172
  • 1
    Can you reproduce this in a StackBlitz please? When it's disabled, I can't tab onto the button, therefore I can use the return key to activate it https://stackblitz.com/edit/angular-vwrb5v?file=src%2Fapp%2Fapp.component.html – user184994 Aug 28 '18 at 04:18
  • you are talking about disabled controls or disable button? – Akj Aug 28 '18 at 04:28
  • In saveForm(), you can check this.myForm.valid and if it's not, just end the function. – Powkachu Aug 28 '18 at 08:14
  • @user184994 Thanks for that stackblitz. You accurately implemented what I described so then I went looking for what is unique in my situation ( a la my comment on possibly something in my code base)... The element in question is actually not a standard HTML element (I used "button" above as a generic example because I did not think it mattered.) But the real component in my code is an element created with the stencil web component compiler (stenciljs.com). That may be the issue here. (I just added that tag to the question, too.) – – Michael Sorens Aug 28 '18 at 22:40
  • What happens if you try `aria-disabled`? – Phix Aug 29 '18 at 00:29

0 Answers0