From 4d02db8663d60a4aae3b03a1954db6e21d95deba Mon Sep 17 00:00:00 2001
From: jnizet <jb@ninja-squad.com>
Date: Tue, 6 Sep 2016 22:34:43 +0200
Subject: [PATCH] fix(timepicker): spinners don't submit form anymore

fix #690
---
 src/timepicker/timepicker.spec.ts | 29 +++++++++++++++++++++++++++++
 src/timepicker/timepicker.ts      | 14 +++++++-------
 2 files changed, 36 insertions(+), 7 deletions(-)

diff --git a/src/timepicker/timepicker.spec.ts b/src/timepicker/timepicker.spec.ts
index a694dc6924..5f997672a6 100644
--- 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,9 @@ 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
index 01fd3d9b74..8a9a420602 100644
--- a/src/timepicker/timepicker.ts
+++ b/src/timepicker/timepicker.ts
@@ -50,14 +50,14 @@ 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>
@@ -65,7 +65,7 @@ const NGB_TIMEPICKER_VALUE_ACCESSOR = {
           <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,20 +97,20 @@ 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>
@@ -118,7 +118,7 @@ const NGB_TIMEPICKER_VALUE_ACCESSOR = {
           <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>