fix(rating): ignore clicks on disabled rating (#3574)

Fixes #3465
ng-bootstrap · Feb 12, 2020 · 900a8db · 900a8db
1 parent 59581c7
commit 900a8db
Show file tree

Hide file tree

Showing 2 changed files with 53 additions and 2 deletions.
diff --git a/src/rating/rating.spec.ts b/src/rating/rating.spec.ts
@@ -450,6 +450,19 @@ describe('ngb-rating', () => {
     });
   });
 
+  it('should set tabindex to -1 when disabled', () => {
+    const fixture = createTestComponent('<ngb-rating></ngb-rating>');
+    let ratingEl = fixture.debugElement.query(By.directive(NgbRating));
+    let ratingComp = <NgbRating>ratingEl.componentInstance;
+
+    fixture.detectChanges();
+    expect(ratingEl.nativeElement.getAttribute('tabindex')).toEqual('0');
+
+    ratingComp.disabled = true;
+    fixture.detectChanges();
+    expect(ratingEl.nativeElement.getAttribute('tabindex')).toEqual('-1');
+  });
+
   describe('keyboard support', () => {
 
     it('should handle arrow keys', () => {
@@ -582,6 +595,40 @@ describe('ngb-rating', () => {
       expect(element.nativeElement).toHaveCssClass('ng-untouched');
     });
 
+    it('should not update template driven form by clicking disabled control', async(() => {
+         const html = `
+          <ngb-rating [(ngModel)]="model" class="control" max="5"></ngb-rating>
+          <ngb-rating [(ngModel)]="model" class="control-disabled" max="5" disabled></ngb-rating>`;
+
+         const fixture = createTestComponent(html);
+         const element = fixture.debugElement.query(By.css('.control'));
+         const disabledElement = fixture.debugElement.query(By.css('.control-disabled'));
+
+         fixture.detectChanges();
+         fixture.whenStable()
+             .then(() => {
+               getStar(element.nativeElement, 3).click();
+
+               fixture.detectChanges();
+               return fixture.whenStable();
+             })
+             .then(() => {
+               expect(getState(element.nativeElement)).toEqual([true, true, true, false, false]);
+               expect(getState(disabledElement.nativeElement)).toEqual([false, false, false, false, false]);
+               expect(fixture.componentInstance.model).toEqual(3);
+
+               getStar(disabledElement.nativeElement, 4).click();
+               fixture.detectChanges();
+               return fixture.whenStable();
+             })
+             .then(() => {
+               fixture.detectChanges();
+               expect(getState(element.nativeElement)).toEqual([true, true, true, false, false]);
+               expect(getState(disabledElement.nativeElement)).toEqual([false, false, false, false, false]);
+               expect(fixture.componentInstance.model).toEqual(3);
+             });
+       }));
+
     it('should handle clicks and update form control', () => {
       const html = `
         <form [formGroup]="form">

diff --git a/src/rating/rating.ts b/src/rating/rating.ts
@@ -48,7 +48,7 @@ const NGB_RATING_VALUE_ACCESSOR = {
   encapsulation: ViewEncapsulation.None,
   host: {
     'class': 'd-inline-flex',
-    'tabindex': '0',
+    '[tabindex]': 'disabled ? -1 : 0',
     'role': 'slider',
     'aria-valuemin': '0',
     '[attr.aria-valuemax]': 'max',
@@ -146,7 +146,11 @@ export class NgbRating implements ControlValueAccessor,
 
   handleBlur() { this.onTouched(); }
 
-  handleClick(value: number) { this.update(this.resettable && this.rate === value ? 0 : value); }
+  handleClick(value: number) {
+    if (!this.readonly && !this.disabled) {
+      this.update(this.resettable && this.rate === value ? 0 : value);
+    }
+  }
 
   handleKeyDown(event: KeyboardEvent) {
     // tslint:disable-next-line:deprecation