Date Picker Dialog: remove mixed click and enter/space key listeners …

…for buttons (pull #1313) Resolves #1311: When using Firefox, activating a date button in the calendar grid was causing the dialog to close and re-open instead of choosing the date. This commit resolves the issue with changes to event listeners. Co-authored-by: Matt King <[email protected]>
w3c · Feb 6, 2020 · d7ea476 · d7ea476
1 parent e66d3f7
commit d7ea476
Show file tree

Hide file tree

Showing 3 changed files with 2 additions and 45 deletions.
diff --git a/examples/dialog-modal/js/calendar-button.js b/examples/dialog-modal/js/calendar-button.js
@@ -24,32 +24,9 @@ var CalendarButtonInput = function (inputNode, buttonNode, datepicker) {
 
 CalendarButtonInput.prototype.init = function () {
   this.buttonNode.addEventListener('click', this.handleClick.bind(this));
-  this.buttonNode.addEventListener('keydown', this.handleKeyDown.bind(this));
   this.buttonNode.addEventListener('focus', this.handleFocus.bind(this));
 };
 
-CalendarButtonInput.prototype.handleKeyDown = function (event) {
-  var flag = false;
-
-  switch (event.keyCode) {
-
-    case this.keyCode.SPACE:
-    case this.keyCode.ENTER:
-      this.datepicker.show();
-      this.datepicker.setFocusDay();
-      flag = true;
-      break;
-
-    default:
-      break;
-  }
-
-  if (flag) {
-    event.stopPropagation();
-    event.preventDefault();
-  }
-};
-
 CalendarButtonInput.prototype.handleClick = function () {
   if (!this.datepicker.isOpen()) {
     this.datepicker.show();

diff --git a/examples/dialog-modal/js/datepicker-day.js b/examples/dialog-modal/js/datepicker-day.js
@@ -34,7 +34,7 @@ var DatePickerDay = function (domNode, datepicker, index, row, column) {
 
 DatePickerDay.prototype.init = function () {
   this.domNode.setAttribute('tabindex', '-1');
-  this.domNode.addEventListener('mousedown', this.handleMouseDown.bind(this));
+  this.domNode.addEventListener('click', this.handleClick.bind(this));
   this.domNode.addEventListener('keydown', this.handleKeyDown.bind(this));
   this.domNode.addEventListener('focus', this.handleFocus.bind(this));
 
@@ -97,13 +97,6 @@ DatePickerDay.prototype.handleKeyDown = function (event) {
       flag = true;
       break;
 
-    case this.keyCode.ENTER:
-    case this.keyCode.SPACE:
-      this.datepicker.setTextboxDate(this.day);
-      this.datepicker.hide();
-      flag = true;
-      break;
-
     case this.keyCode.RIGHT:
       this.datepicker.moveFocusToNextDay();
       flag = true;
@@ -163,7 +156,7 @@ DatePickerDay.prototype.handleKeyDown = function (event) {
   }
 };
 
-DatePickerDay.prototype.handleMouseDown = function (event) {
+DatePickerDay.prototype.handleClick = function (event) {
 
   if (!this.isDisabled()) {
     this.datepicker.setTextboxDate(this.day);

diff --git a/examples/dialog-modal/js/datepicker.js b/examples/dialog-modal/js/datepicker.js
@@ -78,7 +78,6 @@ DatePicker.prototype.init = function () {
   this.prevMonthNode.addEventListener('keydown', this.handlePreviousMonthButton.bind(this));
   this.nextMonthNode.addEventListener('keydown', this.handleNextMonthButton.bind(this));
   this.prevYearNode.addEventListener('keydown', this.handlePreviousYearButton.bind(this));
-
   this.nextYearNode.addEventListener('keydown', this.handleNextYearButton.bind(this));
 
   document.body.addEventListener('mousedown', this.handleBackgroundMouseDown.bind(this), true);
@@ -226,14 +225,6 @@ DatePicker.prototype.handleOkButton = function (event) {
     case 'keydown':
 
       switch (event.keyCode) {
-        case this.keyCode.ENTER:
-
-          this.setTextboxDate();
-
-          this.hide();
-          flag = true;
-          break;
-
         case this.keyCode.TAB:
           if (!event.shiftKey) {
             this.prevYearNode.focus();
@@ -275,10 +266,6 @@ DatePicker.prototype.handleCancelButton = function (event) {
     case 'keydown':
 
       switch (event.keyCode) {
-        case this.keyCode.ENTER:
-          this.hide();
-          flag = true;
-          break;
 
         case this.keyCode.ESC:
           this.hide();