dkreider/ngx-loading-buttons

Button is clickable even when disabled

Closed this issue · 16 comments

Deewens commented

Hi,

Thanks for your lib', however, I have a minor issue. When I use the [disabled] attribute on my button, with your library, (so with [mtBasicSpinner] and [hideText], even when the button should be disabled we can still click on it and the button still fires an event). However, it works well when I remove the attribute from your libs.

The fix should be: when the button is marked as [disabled]="true", the click should not be fired.

Thanks!

dkreider commented

Hey @Deewens 👋🏻

Thanks for opening this issue. I'll investigate and push a fix as soon as I get time.

  • 👍1
dkreider commented

@Deewens what version of Angular are you using?

MilanNemeth commented

hey @dkreider,

Since this issue is still open, can you tell me if it's or it isn't resolved in the latest release? Btw, I've found that it's still reproducible.
TY

Deewens commented

@Deewens what version of Angular are you using?

Hi, sorry, I completely forgot to answer. I'm using Angular 13.

MilanNemeth commented

@Deewens what version of Angular are you using?

Hi, sorry, I completely forgot to answer. I'm using Angular 13.

Ditto

dkreider commented

Hey folks, thanks for your interest. I'll try to push a fix soon.

dkreider commented

@Deewens or @MilanNemeth

Been trying to reproduce this issue on Angular 13 but no success at all.

Could one of you throw a demo Angular project with this issue into a repo and share the link, please?

Thanks.

Deewens commented
MilanNemeth commented

Hi @dkreider
Sorry, I won't have time to build a demo, but I have a slight hint for you.
I've only experienced the issue, when the component was being used in views wrapped inside a mat-sidenav. Otherwise, it was working fine.
Finally, I had to make my own custom component due to hurry, and it had the same issue.
I guess it's related to event bubbling, and I solved the issue by linking the inner button's click event to a custom 'btnClick' @output on my component, and I used this btnClick EventEmitter for event binding from all the parent components.
Hope this helps...

dkreider commented

@MilanNemeth that's very helpful! I'll see if I can reproduce.

rbalet commented

@dkreider This issue can be easily reproduced in the angular 15 version.

<button
  color="primary"
  mat-button
  (click)="uploadSettings()"
  [mtBasicSpinner]="service.loading$ | async"
  [disabled]="!isDirty"
>
  {{ 'SAVE' | translate }}
</button>
rbalet commented

@dkreider I had a look and you're using the following

  @HostBinding('disabled')
  get disabled(): boolean {
    return this.mtBasicSpinner;
  }

Which make it obvious on the reason why this isn't working.
Would it be an Idea to just remove this one ?

Idk if people want's their button to turn to gray when the loader is running.

rbalet commented

@dkreider Fixed by #1

ab-spingo commented

This is still an issue. As indicated in @rbalet comment, library overrides normal disabled behaviour.
Usecase: let's say you'd like to disable submit button on the registration form until agreements checkbox is checked and show the spinner after clicking on active button until backend processes the request.

ab-spingo commented

Temporary solution: put a econd copy of a button and toggle their visibility:

<button mat-flat-button color="primary" [disabled]="!FormModel.valid" *ngIf="!inProgress">Next</button> <button mat-flat-button color="primary" [mtBasicSpinner]="inProgress" *ngIf="inProgress">Next</button>

dkreider commented

Fixed with #24 and vs 17.0.2