added has-input-value-changed event

vaadin · Apr 21, 2023 · 70cb3e9 · 70cb3e9
1 parent 07b45b2
commit 70cb3e9
Show file tree

Hide file tree

Showing 10 changed files with 425 additions and 3 deletions.
diff --git a/src/vaadin-text-field-mixin.html b/src/vaadin-text-field-mixin.html
@@ -296,6 +296,16 @@
           notify: true
         },
 
+        /**
+         * When true, the input element has a non-empty value entered by the user.
+         * @protected
+         */
+        _hasInputValue: {
+          type: Boolean,
+          value: false,
+          observer: '_hasInputValueChanged',
+        },
+
         /**
          * This property is set to true when the control value is invalid.
          * @type {boolean}
@@ -406,6 +416,28 @@
       this._createMethodObserver('_constraintsChanged(required, minlength, maxlength, pattern)');
     }
 
+    /**
+     * 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);
+      this._onInput(event);
+    }
+
     /** @private */
     _onInput(e) {
       if (this.__preventInput) {
@@ -452,6 +484,17 @@
       }
     }
 
+    /**
+     * Observer to notify about the change of private property.
+     *
+     * @private
+     */
+    _hasInputValueChanged(hasValue, oldHasValue) {
+      if (hasValue || oldHasValue) {
+        this.dispatchEvent(new CustomEvent('has-input-value-changed'));
+      }
+    }
+
     /**
      * @param {!Event} e
      * @protected
@@ -666,7 +709,7 @@
 
       this._createConstraintsObserver();
 
-      this._boundOnInput = this._onInput.bind(this);
+      this._boundOnInput = this.__onInput.bind(this);
       this._boundOnChange = this._onChange.bind(this);
       this._boundOnBlur = this._onBlur.bind(this);
       this._boundOnFocus = this._onFocus.bind(this);

diff --git a/test/.eslintrc.json b/test/.eslintrc.json
@@ -17,6 +17,7 @@
     "animationFrameFlush": false,
     "listenOnce": false,
     "oneEvent": false,
-    "nextRender": false
+    "nextRender": false,
+    "nextFrame": false
   }
 }
diff --git a/test/email-field-events.html b/test/email-field-events.html
@@ -0,0 +1,61 @@
+<!doctype html>
+
+<head>
+  <meta charset="UTF-8">
+  <title>vaadin-email-field events tests</title>
+
+  <script src="../../web-component-tester/browser.js"></script>
+  <script src="../../webcomponentsjs/webcomponents-lite.js"></script>
+  <link rel="import" href="../vaadin-email-field.html">
+  <link rel="import" href="helpers.html">
+  <link rel="import" href="../../test-fixture/test-fixture.html">
+</head>
+
+<body>
+  <test-fixture id="email-field">
+    <template>
+      <vaadin-email-field></vaadin-email-field>
+    </template>
+  </test-fixture>
+<script>
+describe('events', () => {
+  let emailField, input;
+
+  describe('has-input-value-changed event', () => {
+    beforeEach(async() => {
+      emailField = fixture('email-field');
+      input = emailField.inputElement;
+    });
+
+    it('should fire the event on input value presence change', async() => {
+      const hasInputValueChangedSpy = sinon.spy();
+      emailField.addEventListener('has-input-value-changed', hasInputValueChangedSpy);
+      input.value = 'foo';
+      input.dispatchEvent(new CustomEvent('input'));
+      await nextFrame();
+      expect(hasInputValueChangedSpy.calledOnce).to.be.true;
+
+      hasInputValueChangedSpy.reset();
+      input.value = '';
+      input.dispatchEvent(new CustomEvent('input'));
+      await nextFrame();
+      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();
+      emailField.addEventListener('has-input-value-changed', hasInputValueChangedSpy);
+      input.value = 'foo';
+      input.dispatchEvent(new CustomEvent('input'));
+      await nextFrame();
+      hasInputValueChangedSpy.reset();
+
+      input.value = 'foobar';
+      input.dispatchEvent(new CustomEvent('input'));
+      await nextFrame();
+      expect(hasInputValueChangedSpy.called).to.be.false;
+    });
+  });
+});
+</script>
+</body>
diff --git a/test/helpers.html b/test/helpers.html
@@ -22,5 +22,11 @@
       Polymer.RenderStatus.afterNextRender(element, resolve);
     });
   };
+
+  window.nextFrame = (element) => {
+    return new Promise(resolve =>
+      requestAnimationFrame(resolve));
+  };
+
 </script>
 </body>
diff --git a/test/integer-field-events.html b/test/integer-field-events.html
@@ -0,0 +1,61 @@
+<!doctype html>
+
+<head>
+  <meta charset="UTF-8">
+  <title>vaadin-integer-field events tests</title>
+
+  <script src="../../web-component-tester/browser.js"></script>
+  <script src="../../webcomponentsjs/webcomponents-lite.js"></script>
+  <link rel="import" href="../vaadin-integer-field.html">
+  <link rel="import" href="helpers.html">
+  <link rel="import" href="../../test-fixture/test-fixture.html">
+</head>
+
+<body>
+  <test-fixture id="integer-field">
+    <template>
+      <vaadin-integer-field></vaadin-integer-field>
+    </template>
+  </test-fixture>
+<script>
+describe('events', () => {
+  let integerField, input;
+
+  describe('has-input-value-changed event', () => {
+    beforeEach(async() => {
+      integerField = fixture('integer-field');
+      input = integerField.inputElement;
+    });
+
+    it('should fire the event on input value presence change', async() => {
+      const hasInputValueChangedSpy = sinon.spy();
+      integerField.addEventListener('has-input-value-changed', hasInputValueChangedSpy);
+      input.value = '5';
+      input.dispatchEvent(new CustomEvent('input'));
+      await nextFrame();
+      expect(hasInputValueChangedSpy.calledOnce).to.be.true;
+
+      hasInputValueChangedSpy.reset();
+      input.value = '';
+      input.dispatchEvent(new CustomEvent('input'));
+      await nextFrame();
+      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();
+      integerField.addEventListener('has-input-value-changed', hasInputValueChangedSpy);
+      input.value = '5';
+      input.dispatchEvent(new CustomEvent('input'));
+      await nextFrame();
+      hasInputValueChangedSpy.reset();
+
+      input.value = '56';
+      input.dispatchEvent(new CustomEvent('input'));
+      await nextFrame();
+      expect(hasInputValueChangedSpy.called).to.be.false;
+    });
+  });
+});
+</script>
+</body>
diff --git a/test/number-field-events.html b/test/number-field-events.html
@@ -0,0 +1,61 @@
+<!doctype html>
+
+<head>
+  <meta charset="UTF-8">
+  <title>vaadin-number-field events tests</title>
+
+  <script src="../../web-component-tester/browser.js"></script>
+  <script src="../../webcomponentsjs/webcomponents-lite.js"></script>
+  <link rel="import" href="../vaadin-number-field.html">
+  <link rel="import" href="helpers.html">
+  <link rel="import" href="../../test-fixture/test-fixture.html">
+</head>
+
+<body>
+ <test-fixture id="number-field">
+    <template>
+      <vaadin-number-field></vaadin-number-field>
+    </template>
+  </test-fixture>
+<script>
+describe('events', () => {
+  let numberField, input;
+
+  describe('has-input-value-changed event', () => {
+    beforeEach(async() => {
+      numberField = fixture('number-field');
+      input = numberField.inputElement;
+    });
+
+    it('should fire the event on input value presence change', async() => {
+      const hasInputValueChangedSpy = sinon.spy();
+      numberField.addEventListener('has-input-value-changed', hasInputValueChangedSpy);
+      input.value = '5';
+      input.dispatchEvent(new CustomEvent('input'));
+      await nextFrame();
+      expect(hasInputValueChangedSpy.calledOnce).to.be.true;
+
+      hasInputValueChangedSpy.reset();
+      input.value = '';
+      input.dispatchEvent(new CustomEvent('input'));
+      await nextFrame();
+      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();
+      numberField.addEventListener('has-input-value-changed', hasInputValueChangedSpy);
+      input.value = '5';
+      input.dispatchEvent(new CustomEvent('input'));
+      await nextFrame();
+      hasInputValueChangedSpy.reset();
+
+      input.value = '56';
+      input.dispatchEvent(new CustomEvent('input'));
+      await nextFrame();
+      expect(hasInputValueChangedSpy.called).to.be.false;
+    });
+  });
+});
+</script>
+</body>
diff --git a/test/password-field-events.html b/test/password-field-events.html
@@ -0,0 +1,61 @@
+<!doctype html>
+
+<head>
+  <meta charset="UTF-8">
+  <title>vaadin-password-field events tests</title>
+
+  <script src="../../web-component-tester/browser.js"></script>
+  <script src="../../webcomponentsjs/webcomponents-lite.js"></script>
+  <link rel="import" href="../vaadin-password-field.html">
+  <link rel="import" href="helpers.html">
+  <link rel="import" href="../../test-fixture/test-fixture.html">
+</head>
+
+<body>
+  <test-fixture id="password-field">
+    <template>
+      <vaadin-password-field></vaadin-password-field>
+    </template>
+  </test-fixture>
+<script>
+  describe('events', () => {
+    let passwordField, input;
+
+    describe('has-input-value-changed event', () => {
+      beforeEach(async() => {
+        passwordField = fixture('password-field');
+        input = passwordField.inputElement;
+      });
+
+      it('should fire the event on input value presence change', async() => {
+        const hasInputValueChangedSpy = sinon.spy();
+        passwordField.addEventListener('has-input-value-changed', hasInputValueChangedSpy);
+        input.value = 'foo';
+        input.dispatchEvent(new CustomEvent('input'));
+        await nextFrame();
+        expect(hasInputValueChangedSpy.calledOnce).to.be.true;
+
+        hasInputValueChangedSpy.reset();
+        input.value = '';
+        input.dispatchEvent(new CustomEvent('input'));
+        await nextFrame();
+        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();
+        passwordField.addEventListener('has-input-value-changed', hasInputValueChangedSpy);
+        input.value = 'foo';
+        input.dispatchEvent(new CustomEvent('input'));
+        await nextFrame();
+        hasInputValueChangedSpy.reset();
+
+        input.value = 'foobar';
+        input.dispatchEvent(new CustomEvent('input'));
+        await nextFrame();
+        expect(hasInputValueChangedSpy.called).to.be.false;
+      });
+    });
+  });
+</script>
+</body>
diff --git a/test/test-suites.js b/test/test-suites.js
@@ -13,5 +13,11 @@ window.VaadinTextFieldSuites = [
   'number-field-validation.html',
   'integer-field-validation.html',
   'password-field-validation.html',
-  'email-field-validation.html'
+  'email-field-validation.html',
+  'text-field-events.html',
+  'text-area-events.html',
+  'password-field-events.html',
+  'integer-field-events.html',
+  'number-field-events.html',
+  'email-field-events.html'
 ];