fix: disable validation of internal text-field (#1052)

vaadin · Sep 21, 2023 · 200b1a3 · 200b1a3
1 parent eb42fc5
commit 200b1a3
Show file tree

Hide file tree

Showing 7 changed files with 217 additions and 14 deletions.
diff --git a/src/vaadin-combo-box-light.html b/src/vaadin-combo-box-light.html
@@ -142,6 +142,17 @@
         return this.getRootNode().activeElement === this.inputElement;
       }
 
+      /**
+       * Returns true if the current input value satisfies all constraints (if any).
+       * @return {boolean}
+       */
+      checkValidity() {
+        if (this.inputElement && this.inputElement.validate) {
+          return this.inputElement.validate();
+        }
+        return super.checkValidity();
+      }
+
       /** @protected */
       connectedCallback() {
         super.connectedCallback();

diff --git a/src/vaadin-combo-box-mixin.html b/src/vaadin-combo-box-mixin.html
@@ -916,6 +916,7 @@
     /** @private */
     _detectAndDispatchChange() {
       if (this.value !== this._lastCommittedValue) {
+        this.validate();
         this.dispatchEvent(new CustomEvent('change', {bubbles: true}));
         this._lastCommittedValue = this.value;
       }
@@ -1080,6 +1081,7 @@
       }
       if (!this.readonly && !this._closeOnBlurIsPrevented) {
         this._closeOrCommit();
+        this.validate();
       }
     }
 
@@ -1109,8 +1111,8 @@
      * @return {boolean | undefined}
      */
     checkValidity() {
-      if (this.inputElement.validate) {
-        return this.inputElement.validate();
+      if (this.inputElement.checkValidity) {
+        return this.inputElement.checkValidity();
       }
     }
 

diff --git a/src/vaadin-combo-box.html b/src/vaadin-combo-box.html
@@ -387,6 +387,13 @@
         ready() {
           super.ready();
 
+          // Disable the internal text-field's validation to prevent it from overriding
+          // the invalid state that was propagated to the text-field from the combo-box.
+          this.inputElement.validate = () => {};
+          // Restore the internal text-field's invalid state in case
+          // it got overridden before the validation was disabled above.
+          this.inputElement.invalid = this.invalid;
+
           this._nativeInput = this.inputElement.focusElement;
           this._toggleElement = this.$.toggleButton;
           this._clearElement = this.inputElement.shadowRoot.querySelector('[part="clear-button"]');

diff --git a/test/.eslintrc.json b/test/.eslintrc.json
@@ -1,4 +1,7 @@
 {
+  "parserOptions": {
+    "ecmaVersion": 8
+  },
   "rules": {
     "no-unused-vars": 0
   },
@@ -34,6 +37,7 @@
     "_fixture": false,
     "gemini": false,
     "flush": false,
-    "ShadyDOM": false
+    "ShadyDOM": false,
+    "nextRender": false
   }
 }
diff --git a/test/test-suites.js b/test/test-suites.js
@@ -17,7 +17,8 @@ window.VaadinComboBoxSuites = [
   'item-renderer.html',
   'item-template.html',
   'vaadin-combo-box-dropdown.html',
-  'lazy-loading.html'
+  'lazy-loading.html',
+  'validation.html'
 ];
 
 if (isPolymer2) {

diff --git a/test/vaadin-combo-box-light.html b/test/vaadin-combo-box-light.html
@@ -309,33 +309,33 @@
 
         it('should clear the selection when clicking on the clear button', () => {
           comboBox.open();
-    
+
           fire('click', clearButton);
-    
+
           expect(comboBox.value).to.eql('');
           expect(comboBox.$.overlay._selectedItem).to.be.null;
           expect(comboBox.selectedItem).to.be.null;
         });
-    
+
         it('should not close the dropdown after clearing a selection', () => {
           comboBox.open();
-    
+
           fire('click', clearButton);
-    
+
           expect(comboBox.opened).to.eql(true);
         });
-    
+
         it('should not open the dropdown after clearing a selection', () => {
           fire('click', clearButton);
-    
+
           expect(comboBox.opened).to.eql(false);
         });
-    
+
         it('should cancel click event to avoid input blur', () => {
           comboBox.open();
-    
+
           const event = fire('click', clearButton);
-    
+
           expect(event.defaultPrevented).to.eql(true);
         });
 

diff --git a/test/validation.html b/test/validation.html
@@ -0,0 +1,178 @@
+<!doctype html>
+<html>
+
+<head>
+  <meta charset="UTF-8">
+  <title>vaadin-combo-box validation tests</title>
+
+  <script src="../../web-component-tester/browser.js"></script>
+  <script src='../../webcomponentsjs/webcomponents-lite.js'></script>
+  <link rel="import" href="../../iron-test-helpers/mock-interactions.html">
+  <link rel="import" href="../src/vaadin-combo-box.html">
+  <link rel="import" href="helpers.html">
+  <link rel="import" href="../../test-fixture/test-fixture.html">
+</head>
+
+<body>
+  <test-fixture id="combo-box">
+    <template>
+      <vaadin-combo-box items='["foo"]'></vaadin-combo-box>
+    </template>
+  </test-fixture>
+
+  <test-fixture id="combo-box-required">
+    <template>
+      <vaadin-combo-box required items='["foo"]'></vaadin-combo-box>
+    </template>
+  </test-fixture>
+
+  <test-fixture id="combo-box-required-value-invalid">
+    <template>
+      <vaadin-combo-box required items='["foo"]' value="foo" invalid></vaadin-combo-box>
+    </template>
+  </test-fixture>
+
+  <script>
+  function outsideClick() {
+    // Move focus to body
+    document.body.tabIndex = 0;
+    document.body.focus();
+    document.body.tabIndex = -1;
+    // Outside click
+    document.body.click();
+  }
+
+  describe('initial validation', () => {
+    let comboBox;
+    let validateSpy;
+
+    beforeEach(() => {
+      comboBox = document.createElement('vaadin-combo-box');
+      comboBox.allowCustomValue = true;
+      validateSpy = sinon.spy(comboBox, 'validate');
+    });
+
+    afterEach(() => {
+      comboBox.remove();
+    });
+
+    it('should not validate by default', async() => {
+      document.body.appendChild(comboBox);
+      await nextRender();
+      expect(validateSpy.called).to.be.false;
+    });
+
+    it('should not validate when the field has an initial value', async() => {
+      comboBox.value = 'foo';
+      document.body.appendChild(comboBox);
+      await nextRender();
+      expect(validateSpy.called).to.be.false;
+    });
+
+    it('should not validate when the field has an initial value and invalid', async() => {
+      comboBox.value = 'foo';
+      comboBox.invalid = true;
+      document.body.appendChild(comboBox);
+      await nextRender();
+      expect(validateSpy.called).to.be.false;
+    });
+  });
+
+  describe('basic', () => {
+    let comboBox, validateSpy, changeSpy;
+
+    beforeEach(async() => {
+      comboBox = fixture('combo-box');
+      await nextRender();
+      validateSpy = sinon.spy(comboBox, 'validate');
+      changeSpy = sinon.spy();
+      comboBox.addEventListener('change', changeSpy);
+    });
+
+    it('should disable validation of internal text-field', () => {
+      comboBox.required = true;
+      comboBox.inputElement.validate();
+      expect(comboBox.inputElement.invalid).to.be.false;
+    });
+
+    it('should validate on focusout', () => {
+      comboBox.inputElement.dispatchEvent(new CustomEvent('focusout', {bubbles: true, composed: true}));
+      expect(validateSpy.calledOnce).to.be.true;
+    });
+
+    it('should validate before change event on Enter', () => {
+      comboBox.inputElement.focus();
+      comboBox.inputElement.value = 'foo';
+      comboBox.inputElement.dispatchEvent(new CustomEvent('input'));
+      MockInteractions.pressAndReleaseKeyOn(comboBox.inputElement, 13, null, 'Enter');
+      expect(validateSpy.calledOnce).to.be.true;
+      expect(changeSpy.calledOnce).to.be.true;
+      expect(changeSpy.calledAfter(validateSpy)).to.be.true;
+    });
+
+    it('should validate before change event on clear button click', () => {
+      comboBox.value = 'foo';
+      validateSpy.reset();
+      comboBox.inputElement.$.clearButton.dispatchEvent(new CustomEvent('click', {composed: true, bubbles: true}));
+      expect(validateSpy.calledOnce).to.be.true;
+      expect(changeSpy.calledOnce).to.be.true;
+      expect(changeSpy.calledAfter(validateSpy)).to.be.true;
+    });
+
+    it('should fire a validated event on validation success', () => {
+      const validatedSpy = sinon.spy();
+      comboBox.addEventListener('validated', validatedSpy);
+      comboBox.validate();
+
+      expect(validatedSpy.calledOnce).to.be.true;
+      const event = validatedSpy.firstCall.args[0];
+      expect(event.detail.valid).to.be.true;
+    });
+
+    it('should fire a validated event on validation failure', () => {
+      const validatedSpy = sinon.spy();
+      comboBox.addEventListener('validated', validatedSpy);
+      comboBox.required = true;
+      comboBox.validate();
+
+      expect(validatedSpy.calledOnce).to.be.true;
+      const event = validatedSpy.firstCall.args[0];
+      expect(event.detail.valid).to.be.false;
+    });
+  });
+
+  describe('required', () => {
+    let comboBox;
+
+    beforeEach(async() => {
+      comboBox = fixture('combo-box-required');
+      await nextRender();
+    });
+
+    it('should pass validation with value', () => {
+      comboBox.value = 'foo';
+      expect(comboBox.checkValidity()).to.be.true;
+    });
+
+    it('should fail validation without value', () => {
+      expect(comboBox.checkValidity()).to.be.false;
+    });
+  });
+
+  describe('required + value + invalid', () => {
+    let comboBox;
+
+    beforeEach(async() => {
+      comboBox = fixture('combo-box-required-value-invalid');
+      await nextRender();
+    });
+
+    it('should propagate invalid state to internal text-field', () => {
+      expect(comboBox.inputElement.invalid).to.be.true;
+    });
+  });
+  </script>
+
+</body>
+
+</html>