fix: clear input values when setting value property to null (#8017) (#…

…8018) Co-authored-by: Serhii Kulykov <[email protected]>
vaadin · Oct 24, 2024 · b643907 · b643907
1 parent 0cf89ed
commit b643907
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 2 deletions.
diff --git a/packages/custom-field/src/vaadin-custom-field-mixin.js b/packages/custom-field/src/vaadin-custom-field-mixin.js
@@ -183,7 +183,7 @@ export const CustomFieldMixin = (superClass) =>
     checkValidity() {
       const invalidFields = this.inputs.filter((input) => !(input.validate || input.checkValidity).call(input));
 
-      if (invalidFields.length || (this.required && !this.value.trim())) {
+      if (invalidFields.length || (this.required && !(this.value && this.value.trim()))) {
         // Either 1. one of the input fields is invalid or
         // 2. the custom field itself is required but doesn't have a value
         return false;
@@ -294,7 +294,7 @@ export const CustomFieldMixin = (superClass) =>
         return;
       }
 
-      this.__applyInputsValue(value);
+      this.__applyInputsValue(value || '\t');
 
       if (oldValue !== undefined) {
         this.validate();

diff --git a/packages/custom-field/test/custom-field.common.js b/packages/custom-field/test/custom-field.common.js
@@ -77,6 +77,17 @@ describe('custom field', () => {
       await nextUpdate(customField);
       expect(customField.hasAttribute('has-value')).to.be.true;
     });
+
+    it('should clear input values when set to null', async () => {
+      customField.value = '1\t1';
+      await nextUpdate(customField);
+
+      customField.value = null;
+      await nextUpdate(customField);
+      customField.inputs.forEach((el) => {
+        expect(el.value).to.equal('');
+      });
+    });
   });
 
   describe('value set with attribute', () => {

diff --git a/packages/custom-field/test/validation.test.js b/packages/custom-field/test/validation.test.js
@@ -85,6 +85,11 @@ describe('validation', () => {
       expect(customField.invalid).to.be.true;
     });
 
+    it('should return false on checkValidity call when value is set to null', () => {
+      customField.value = null;
+      expect(customField.checkValidity()).to.be.false;
+    });
+
     it('should become valid after receiving a non-empty value from "change" event', () => {
       customField.inputs[0].value = 'foo';
       fire(customField.inputs[0], 'change');