Merge pull request #29 from IBM/hotfix/calendar-next

Prevent form submission when clicking calnedar buttons
IBM · Oct 31, 2017 · 193a8ab · 193a8ab
2 parents f7b8b41 + e88aef7
commit 193a8ab
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 3 deletions.
diff --git a/calendar/calendar.html b/calendar/calendar.html
@@ -21,11 +21,11 @@
   <!-- Calendar Header -->
   <div class="calendar__header">
     <!-- Previous Month -->
-    <button class="calendar__previous" :title="t(microcopy.previous)" @click="navigate('prev')" :aria-controls="tableID">
+    <button class="calendar__previous" :title="t(microcopy.previous)" @click="navigate('prev', $event)" :aria-controls="tableID">
       <span class="calendar__nav">{{ t(microcopy.previous) }}</span>
     </button>
     <!-- Next Month -->
-    <button class="calendar__next" :title="t(microcopy.next)" @click="navigate('next')" :aria-controls="tableID">
+    <button class="calendar__next" :title="t(microcopy.next)" @click="navigate('next', $event)" :aria-controls="tableID">
       <span class="calendar__nav">{{ t(microcopy.next) }}</span>
     </button>
     <!-- Visual Calendar Month -->

diff --git a/calendar/calendar.js b/calendar/calendar.js
@@ -265,6 +265,8 @@ export default {
     select(e) {
       let { target } = e;
 
+      e.preventDefault();
+
       if (target.classList.contains('calendar__date')) {
         target = target.parentNode;
       }
@@ -358,7 +360,9 @@ export default {
     isToday(current) {
       return current.day === this.today.day && current.month === this.today.month && current.year === this.today.year;
     },
-    navigate(dir) {
+    navigate(dir, e) {
+      e.preventDefault();
+
       const move = {};
       if (dir === 'next') {
         move.month = this.current.month + 1 > 11 ? 0 : this.current.month + 1;