Fix case where time input would not fire correctly

mydea · May 23, 2017 · ab8e712 · ab8e712
1 parent cc4406d
commit ab8e712
Show file tree

Hide file tree

Showing 3 changed files with 27 additions and 37 deletions.
diff --git a/addon/components/time-picker.js b/addon/components/time-picker.js
@@ -474,6 +474,20 @@ export default Component.extend({
     set(this, 'stringValue', value || null);
   },
 
+  _closeNext() {
+    if (get(this, 'isDestroyed') || !get(this, 'isOpen')) {
+      return;
+    }
+    let inputValue = get(this, 'inputValue');
+    // If there is an input, this means it hasn't been processed yet
+    // --> Process it now!
+    if (inputValue) {
+      this._checkStringInput();
+    }
+
+    this._close();
+  },
+
   /**
    * Prepare data for the time input.
    *
@@ -496,6 +510,11 @@ export default Component.extend({
   actions: {
 
     open() {
+      let timer = get(this, '_closeNextTimer');
+      if (timer) {
+        run.cancel(timer);
+      }
+
       this._open();
     },
 
@@ -510,20 +529,8 @@ export default Component.extend({
 
     closeNext() {
       // Wait for all other events to finish
-      // Somehow, 1 or 10 doesn't work
-      run.later(this, () => {
-        if (get(this, 'isDestroyed')) {
-          return;
-        }
-        let inputValue = get(this, 'inputValue');
-        // If there is an input, this means it hasn't been processed yet
-        // --> Process it now!
-        if (inputValue) {
-          this._checkStringInput();
-        }
-
-        this._close();
-      }, 100);
+      let closeNext = run.debounce(this, this._closeNext, 100);
+      set(this, '_closeNextTimer', closeNext);
     },
 
     selectUp() {
@@ -565,11 +572,13 @@ export default Component.extend({
       let value = get(selectedOption, 'value');
       set(this, 'stringValue', value);
       this._checkInput();
+      this._close();
     },
 
     selectValue(value) {
       set(this, 'stringValue', value);
       this._checkInput();
+      this._close();
     },
 
     updateInputValue(val) {
@@ -590,8 +599,10 @@ export default Component.extend({
       // Also handle the enter event here, since ember-basic-dropdown seems to be interfering somewhere
       let { keyCode } = event;
       let enterKeyCode = 13;
-      if (keyCode === enterKeyCode) {
+      let tabKeyCode = 9;
+      if (keyCode === enterKeyCode || keyCode === tabKeyCode) {
         this.send('selectCurrent');
+        return false;
       }
     }
   }

diff --git a/addon/templates/components/time-picker.hbs b/addon/templates/components/time-picker.hbs
@@ -1,6 +1,6 @@
 {{#basic-dropdown
   onOpen=(action 'openDropdown')
-  onClose=(action 'closeDropdown')
+  onClose=(action 'closeNext')
 as |dd| }}
 
   {{#dd.trigger
@@ -15,9 +15,6 @@ as |dd| }}
       input-change=(action 'updateInputValue')
       click=(action 'openAndClear')
 
-      focus-out=(action 'closeNext')
-      focus-in=(action 'open')
-
       escape=(action 'close')
       enter=(action 'selectCurrent')
       arrow-up=(action 'selectUp')

diff --git a/tests/integration/components/time-picker-test.js b/tests/integration/components/time-picker-test.js
@@ -93,21 +93,3 @@ test('amPm is correctly evaluated for locale de', function(assert) {
 
   assert.equal(this.$().find('input').val().trim(), time.format('HH:mm'), 'Correct date is shown');
 });
-
-test('action is sent when the user removes focus from input field', function(assert) {
-  assert.expect(3);
-
-  this.on('uptimeTime', function(time) {
-    assert.equal(arguments.length, 1, 'one argument is passed to action.');
-    assert.equal(time.format('HH:mm'), '14:30', 'correct time is passed to action.');
-  });
-  this.render(hbs`{{time-picker action=(action 'uptimeTime')}}`);
-
-  let $input = this.$().find('input');
-  $input.val('14:30').trigger('keyup').trigger('focus');
-  $input.trigger('focusout');
-
-  return wait().then(() => {
-    assert.notOk(this.$().find('.time-picker__dropdown').hasClass('time-picker__dropdown--open'), 'time picker dropdown is closed after selection.');
-  });
-});