fix: replace 'change' to 'click' and 'keyup' in case of IE8 (fix #27) (…

…#30) * fix: replace 'change' to 'click' and 'keyup' in case of IE8 (fix #27) * chore: apply code review
nhn · Aug 5, 2019 · 439a72d · 439a72d
1 parent 9d9ccf2
commit 439a72d
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 12 deletions.
diff --git a/src/js/timepicker/index.js b/src/js/timepicker/index.js
@@ -21,6 +21,8 @@ var SELECTOR_MERIDIEM_ELELMENT = '.tui-timepicker-meridiem';
 var CLASS_NAME_LEFT_MERIDIEM = 'tui-has-left';
 var CLASS_NAME_HIDDEN = 'tui-hidden';
 var CLASS_NAME_CHECKED = 'tui-timepicker-meridiem-checked';
+var INPUT_TYPE_SPINBOX = 'spinbox';
+var INPUT_TYPE_SELECTBOX = 'selectbox';
 
 /**
  * Merge default options
@@ -136,13 +138,13 @@ var TimePicker = snippet.defineClass(/** @lends TimePicker.prototype */ {
         this._meridiemPosition = options.meridiemPosition;
 
         /**
-         * @type {Spinbox}
+         * @type {Spinbox|Selectbox}
          * @private
          */
         this._hourInput = null;
 
         /**
-         * @type {Spinbox}
+         * @type {Spinbox|Selectbox}
          * @private
          */
         this._minuteInput = null;
@@ -215,7 +217,11 @@ var TimePicker = snippet.defineClass(/** @lends TimePicker.prototype */ {
         this._minuteInput.on('change', this._onChangeTimeInput, this);
 
         if (this._showMeridiem) {
-            domUtil.on(this._container, 'change', this._onChangeMeridiem, this);
+            if (this._inputType === INPUT_TYPE_SELECTBOX) {
+                domUtil.on(this._meridiemElement.querySelector('select'), 'change', this._onChangeMeridiem, this);
+            } else if (this._inputType === INPUT_TYPE_SPINBOX) {
+                domUtil.on(this._meridiemElement, 'click', this._onChangeMeridiem, this);
+            }
         }
     },
 
@@ -230,7 +236,11 @@ var TimePicker = snippet.defineClass(/** @lends TimePicker.prototype */ {
         this._minuteInput.destroy();
 
         if (this._showMeridiem) {
-            domUtil.off(this._container, 'change', this._onChangeMeridiem, this);
+            if (this._inputType === INPUT_TYPE_SELECTBOX) {
+                domUtil.off(this._meridiemElement.querySelector('select'), 'change', this._onChangeMeridiem, this);
+            } else if (this._inputType === INPUT_TYPE_SPINBOX) {
+                domUtil.off(this._meridiemElement, 'click', this._onChangeMeridiem, this);
+            }
         }
     },
 
@@ -419,7 +429,7 @@ var TimePicker = snippet.defineClass(/** @lends TimePicker.prototype */ {
         var hour = this._hour;
         var target = util.getTarget(ev);
 
-        if (domUtil.closest(target, SELECTOR_MERIDIEM_ELELMENT)) {
+        if (target.value && domUtil.closest(target, SELECTOR_MERIDIEM_ELELMENT)) {
             hour = this._to24Hour(target.value === 'PM', hour);
             this.setTime(hour, this._minute);
             this._setDisabledHours();

diff --git a/src/js/timepicker/selectbox.js b/src/js/timepicker/selectbox.js
@@ -61,7 +61,7 @@ var Selectbox = snippet.defineClass(/** @lends Selectbox.prototype */ {
         this._format = options.format;
 
         /**
-         * Element
+         * Select element
          * @type {HTMLElement}
          * @private
          */
@@ -125,7 +125,7 @@ var Selectbox = snippet.defineClass(/** @lends Selectbox.prototype */ {
      * @private
      */
     _setEvents: function() {
-        domUtil.on(this._container, 'change', this._onChangeHandler, this);
+        domUtil.on(this._element, 'change', this._onChangeHandler, this);
 
         this.on('changeItems', function(items) {
             this._items = items;
@@ -140,7 +140,7 @@ var Selectbox = snippet.defineClass(/** @lends Selectbox.prototype */ {
     _removeEvents: function() {
         this.off();
 
-        domUtil.off(this._container, 'change', this._onChangeHandler, this);
+        domUtil.off(this._element, 'change', this._onChangeHandler, this);
     },
 
     /**

diff --git a/src/js/timepicker/spinbox.js b/src/js/timepicker/spinbox.js
@@ -138,8 +138,8 @@ var Spinbox = snippet.defineClass(/** @lends Spinbox.prototype */ {
      */
     _setEvents: function() {
         domUtil.on(this._container, 'click', this._onClickHandler, this);
-        domUtil.on(this._container, 'keydown', this._onKeydownInputElement, this);
-        domUtil.on(this._container, 'change', this._onChangeHandler, this);
+        domUtil.on(this._inputElement, 'keydown', this._onKeydownInputElement, this);
+        domUtil.on(this._inputElement, 'change', this._onChangeHandler, this);
 
         this.on('changeItems', function(items) {
             this._items = items;
@@ -155,8 +155,8 @@ var Spinbox = snippet.defineClass(/** @lends Spinbox.prototype */ {
         this.off();
 
         domUtil.off(this._container, 'click', this._onClickHandler, this);
-        domUtil.off(this._container, 'keydown', this._onKeydownInputElement, this);
-        domUtil.off(this._container, 'change', this._onChangeHandler, this);
+        domUtil.off(this._inputElement, 'keydown', this._onKeydownInputElement, this);
+        domUtil.off(this._inputElement, 'change', this._onChangeHandler, this);
     },
 
     /**