fix(rating): fixed model change by clicking on disabled rating element

ng-bootstrap · Feb 3, 2020 · a807442 · a807442
1 parent f4d3848
commit a807442
Show file tree

Hide file tree

Showing 2 changed files with 35 additions and 1 deletion.
diff --git a/src/rating/rating.spec.ts b/src/rating/rating.spec.ts
@@ -582,6 +582,33 @@ describe('ngb-rating', () => {
       expect(element.nativeElement).toHaveCssClass('ng-untouched');
     });
 
+    it('should not update template driven form by clicking disabled control', () => {
+      const html = `
+          <ngb-rating [(ngModel)]="model" class="control" max="5"></ngb-rating>
+          <ngb-rating [(ngModel)]="model" class="control-disabled" max="5"></ngb-rating>`;
+
+      const fixture = createTestComponent(html);
+      const element = fixture.debugElement.query(By.css('.control'));
+      const disabledElement = fixture.debugElement.query(By.css('.control-disabled'));
+      let disabledRatingComp = <NgbRating>disabledElement.componentInstance;
+      disabledRatingComp.disabled = true;
+
+      fixture.whenStable()
+          .then(() => {
+            getStar(element.nativeElement, 3).click();
+            fixture.detectChanges();
+            expect(getState(element.nativeElement)).toEqual([true, true, true, false, false]);
+            expect(getState(disabledElement.nativeElement)).toEqual([false, false, false, false, false]);
+            return fixture.whenStable();
+          })
+          .then(() => {
+            getStar(disabledElement.nativeElement, 4).click();
+            fixture.detectChanges();
+            expect(getState(element.nativeElement)).toEqual([true, true, true, false, false]);
+            expect(getState(disabledElement.nativeElement)).toEqual([false, false, false, false, false]);
+          });
+    });
+
     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
@@ -144,9 +144,16 @@ 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) {
+    if (this.readonly || this.disabled) {
+      return;
+    }
     // tslint:disable-next-line:deprecation
     switch (event.which) {
       case Key.ArrowDown: