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

vaadin · Oct 24, 2024 · 52643b1 · 52643b1
1 parent 3740391
commit 52643b1
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
@@ -182,7 +182,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;
@@ -281,7 +281,7 @@ export const CustomFieldMixin = (superClass) =>
       }
 
       const parseFn = this.parseValue || defaultParseValue;
-      const valuesArray = parseFn.apply(this, [value]);
+      const valuesArray = parseFn.apply(this, [value || '\t']);
       if (!valuesArray || valuesArray.length === 0) {
         console.warn('Value parser has not provided values array');
         return;

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('aria-required', () => {

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');