feat: add internal has-input-value-changed event (#209)

vaadin · Apr 24, 2023 · af68970 · af68970
1 parent bbb8c02
commit af68970
Show file tree

Hide file tree

Showing 3 changed files with 100 additions and 1 deletion.
diff --git a/src/vaadin-time-picker.html b/src/vaadin-time-picker.html
@@ -278,6 +278,16 @@
               value: '23:59:59.999',
             },
 
+            /**
+             * When true, the input element has a non-empty value entered by the user.
+             * @protected
+             */
+            _hasInputValue: {
+              type: Boolean,
+              value: false,
+              observer: '_hasInputValueChanged',
+            },
+
             /**
              * Specifies the number of valid intervals in a day used for
              * configuring the items displayed in the selection box.
@@ -410,6 +420,7 @@
           // thus querySelector in textField.focusElement raises an undefined exception on validate
           this.__dropdownElement.addEventListener('value-changed', e => this.__onInputChange(e));
           this.__inputElement.addEventListener('keydown', this.__onKeyDown.bind(this));
+          this.__inputElement.addEventListener('input', this.__onInput.bind(this));
 
           // Validation listeners
           this.__dropdownElement.addEventListener('change', e => this.validate());
@@ -424,6 +435,38 @@
           });
         }
 
+        /**
+         * Sets the `_hasInputValue` property based on the `input` event.
+         *
+         * @param {InputEvent} event
+         * @protected
+         */
+        _setHasInputValue(event) {
+          this._hasInputValue = event.target.value.length > 0;
+        }
+
+        /**
+         * An input event listener used to update `_hasInputValue` property.
+         * Do not override this method.
+         *
+         * @param {Event} event
+         * @private
+         */
+        __onInput(event) {
+          this._setHasInputValue(event);
+        }
+
+        /**
+         * Observer to notify about the change of private property.
+         *
+         * @private
+         */
+        _hasInputValueChanged(hasValue, oldHasValue) {
+          if (hasValue || oldHasValue) {
+            this.dispatchEvent(new CustomEvent('has-input-value-changed'));
+          }
+        }
+
         /** @private */
         __validDayDivisor(step) {
           // valid if undefined, or exact divides a day, or has millisecond resolution

diff --git a/test/events.html b/test/events.html
@@ -0,0 +1,55 @@
+<!doctype html>
+
+<head>
+  <meta charset="UTF-8">
+  <title>vaadin-time-picker events tests</title>
+  <script src='../../web-component-tester/browser.js'></script>
+  <script src='../../webcomponentsjs/webcomponents-lite.js'></script>
+  <link rel="import" href="../src/vaadin-time-picker.html">
+  <link rel="import" href="../../test-fixture/test-fixture.html">
+</head>
+
+<body>
+  <test-fixture id="time-picker">
+    <template>
+      <vaadin-time-picker></vaadin-time-picker>
+    </template>
+  </test-fixture>
+  <script>
+    describe('events', () => {
+      let timePicker, input;
+
+      describe('has-input-value-changed event', () => {
+        beforeEach(async() => {
+          timePicker = fixture('time-picker');
+          input = timePicker.__inputElement;
+        });
+
+        it('should fire the event on input value presence change', async() => {
+          const hasInputValueChangedSpy = sinon.spy();
+          timePicker.addEventListener('has-input-value-changed', hasInputValueChangedSpy);
+          input.value = '13:00';
+          input.dispatchEvent(new CustomEvent('input'));
+          expect(hasInputValueChangedSpy.calledOnce).to.be.true;
+
+          hasInputValueChangedSpy.reset();
+          input.value = '';
+          input.dispatchEvent(new CustomEvent('input'));
+          expect(hasInputValueChangedSpy.calledOnce).to.be.true;
+        });
+
+        it('should not fire the event on input if input value presence has not changed', async() => {
+          const hasInputValueChangedSpy = sinon.spy();
+          timePicker.addEventListener('has-input-value-changed', hasInputValueChangedSpy);
+          input.value = '13:00';
+          input.dispatchEvent(new CustomEvent('input'));
+          hasInputValueChangedSpy.reset();
+
+          input.value = '13:58';
+          input.dispatchEvent(new CustomEvent('input'));
+          expect(hasInputValueChangedSpy.called).to.be.false;
+        });
+      });
+    });
+  </script>
+</body>
diff --git a/test/test-suites.js b/test/test-suites.js
@@ -7,5 +7,6 @@ window.TimePickerElementSuites = [
   'keyboard-navigation.html',
   'styling.html',
   'range-test.html',
-  'validation.html'
+  'validation.html',
+  'events.html'
 ];