fix(timepicker): spinners don't submit form anymore

Fixes #690 Closes #691
ng-bootstrap · Sep 7, 2016 · f131990 · f131990
1 parent 7107caf
commit f131990
Show file tree

Hide file tree

Showing 2 changed files with 34 additions and 7 deletions.
diff --git a/src/timepicker/timepicker.spec.ts b/src/timepicker/timepicker.spec.ts
@@ -637,6 +637,30 @@ describe('ngb-timepicker', () => {
 
       expect(fixture.componentInstance.model).toBeNull();
     });
+
+    it('should not submit form when spinners clicked', async(() => {
+         const html = `<form (ngSubmit)="onSubmit()">
+           <ngb-timepicker name="control" [(ngModel)]="model"></ngb-timepicker>
+           </form>`;
+
+         const fixture = createTestComponent(html);
+         const compiled = fixture.nativeElement;
+         const buttons = getButtons(compiled);
+         const button = buttons[0] as HTMLButtonElement;
+
+         fixture.detectChanges();
+         fixture.whenStable()
+             .then(() => {
+               fixture.detectChanges();
+               return fixture.whenStable();
+             })
+             .then(() => {
+               button.click();
+               fixture.detectChanges();
+               return fixture.whenStable();
+             })
+             .then(() => { expect(fixture.componentInstance.submitted).toBeFalsy(); });
+       }));
   });
 
   describe('disabled', () => {
@@ -838,4 +862,7 @@ class TestComponent {
   disabled = true;
   readonly = true;
   form = new FormGroup({control: new FormControl('', Validators.required)});
+  submitted = false;
+
+  onSubmit() { this.submitted = true; }
 }
diff --git a/src/timepicker/timepicker.ts b/src/timepicker/timepicker.ts
@@ -50,22 +50,22 @@ const NGB_TIMEPICKER_VALUE_ACCESSOR = {
       <table>
         <tr *ngIf="spinners">
           <td class="text-xs-center">
-            <button class="btn-link" (click)="changeHour(hourStep)"
+            <button type="button" class="btn-link" (click)="changeHour(hourStep)"
               [disabled]="disabled" [class.disabled]="disabled">
               <span class="chevron"></span>
             </button>
           </td>
           <td>&nbsp;</td>
           <td class="text-xs-center">
-            <button class="btn-link" (click)="changeMinute(minuteStep)"
+            <button type="button" class="btn-link" (click)="changeMinute(minuteStep)"
               [disabled]="disabled" [class.disabled]="disabled">
                 <span class="chevron"></span>
             </button>
           </td>
           <template [ngIf]="seconds">
             <td>&nbsp;</td>
             <td class="text-xs-center">
-              <button class="btn-link" (click)="changeSecond(secondStep)"
+              <button type="button" class="btn-link" (click)="changeSecond(secondStep)"
                 [disabled]="disabled" [class.disabled]="disabled">
                 <span class="chevron"></span>
               </button>
@@ -97,28 +97,28 @@ const NGB_TIMEPICKER_VALUE_ACCESSOR = {
           <template [ngIf]="meridian">
             <td>&nbsp;&nbsp;</td>
             <td>
-              <button class="btn btn-outline-primary" (click)="toggleMeridian()">{{model.hour > 12 ? 'PM' : 'AM'}}</button>
+              <button type="button" class="btn btn-outline-primary" (click)="toggleMeridian()">{{model.hour > 12 ? 'PM' : 'AM'}}</button>
             </td>
           </template>
         </tr>
         <tr *ngIf="spinners">
           <td class="text-xs-center">
-            <button class="btn-link" (click)="changeHour(-hourStep)" 
+            <button type="button" class="btn-link" (click)="changeHour(-hourStep)" 
               [disabled]="disabled" [class.disabled]="disabled">
               <span class="chevron bottom"></span>
             </button>
           </td>
           <td>&nbsp;</td>
           <td class="text-xs-center">
-            <button class="btn-link" (click)="changeMinute(-minuteStep)"
+            <button type="button" class="btn-link" (click)="changeMinute(-minuteStep)"
               [disabled]="disabled" [class.disabled]="disabled">
               <span class="chevron bottom"></span>
             </button>
           </td>
           <template [ngIf]="seconds">
             <td>&nbsp;</td>
             <td class="text-xs-center">
-              <button class="btn-link" (click)="changeSecond(-secondStep)"
+              <button type="button" class="btn-link" (click)="changeSecond(-secondStep)"
                 [disabled]="disabled" [class.disabled]="disabled">
                 <span class="chevron bottom"></span>
               </button>