refactor: make required and invalid properties use sync update (#8332)

Author: web-padawan

packages/custom-field/src/vaadin-custom-field-mixin.js

@@ -56,6 +56,7 @@ export const CustomFieldMixin = (superClass) =>
           type: String,
           observer: '__valueChanged',
           notify: true,
+          sync: true,
         },
 
         /**

packages/field-base/src/validate-mixin.js

@@ -23,6 +23,7 @@ export const ValidateMixin = dedupingMixin(
             reflectToAttribute: true,
             notify: true,
             value: false,
+            sync: true,
           },
 
           /**
@@ -47,6 +48,7 @@ export const ValidateMixin = dedupingMixin(
           required: {
             type: Boolean,
             reflectToAttribute: true,
+            sync: true,
           },
         };
       }

packages/field-base/test/validate-mixin.test.js

@@ -1,5 +1,5 @@
 import { expect } from '@vaadin/chai-plugins';
-import { defineLit, definePolymer, fixtureSync, nextRender, nextUpdate } from '@vaadin/testing-helpers';
+import { defineLit, definePolymer, fixtureSync, nextRender } from '@vaadin/testing-helpers';
 import sinon from 'sinon';
 import { ControllerMixin } from '@vaadin/component-base/src/controller-mixin.js';
 import { PolylitMixin } from '@vaadin/component-base/src/polylit-mixin.js';
@@ -16,36 +16,32 @@ const runTests = (defineHelper, baseMixin) => {
       await nextRender();
     });
 
-    it('should reflect required property to attribute', async () => {
+    it('should reflect required property to attribute', () => {
       expect(element.hasAttribute('required')).to.be.false;
 
       element.required = true;
-      await nextUpdate(element);
       expect(element.hasAttribute('required')).to.be.true;
     });
 
-    it('should reflect invalid property to attribute', async () => {
+    it('should reflect invalid property to attribute', () => {
       expect(element.hasAttribute('invalid')).to.be.false;
 
       element.invalid = true;
-      await nextUpdate(element);
       expect(element.hasAttribute('invalid')).to.be.true;
     });
 
     it('should have manual validation disabled by default', () => {
       expect(element.manualValidation).to.be.false;
     });
 
-    it('should fire invalid-changed event on invalid property change', async () => {
+    it('should fire invalid-changed event on invalid property change', () => {
       const spy = sinon.spy();
       element.addEventListener('invalid-changed', spy);
       element.invalid = true;
-      await nextUpdate(element);
       expect(spy.calledOnce).to.be.true;
 
       spy.resetHistory();
       element.invalid = false;
-      await nextUpdate(element);
       expect(spy.calledOnce).to.be.true;
     });