fix: propagate autocapitalize attribute in Chrome (#5175)

vaadin · Dec 28, 2022 · d82ca0a · d82ca0a
1 parent 46002f3
commit d82ca0a
Show file tree

Hide file tree

Showing 2 changed files with 48 additions and 0 deletions.
diff --git a/packages/field-base/src/input-field-mixin.js b/packages/field-base/src/input-field-mixin.js
@@ -46,6 +46,7 @@ export const InputFieldMixin = (superclass) =>
          */
         autocapitalize: {
           type: String,
+          reflectToAttribute: true,
         },
 
         /**

diff --git a/packages/field-base/test/input-field-mixin.test.js b/packages/field-base/test/input-field-mixin.test.js
@@ -71,6 +71,53 @@ describe('input-field-mixin', () => {
     });
   });
 
+  describe('attributes', () => {
+    describe('autocomplete', () => {
+      beforeEach(() => {
+        element = fixtureSync(`<input-field-mixin-element autocomplete="on"></input-field-mixin-element>`);
+        input = element.querySelector('[slot=input]');
+      });
+
+      it('should set autocomplete property on the host element', () => {
+        expect(element.autocomplete).to.equal('on');
+      });
+
+      it('should propagate autocomplete attribute to the input', () => {
+        expect(input.autocomplete).to.equal('on');
+      });
+    });
+
+    describe('autocorrect', () => {
+      beforeEach(() => {
+        element = fixtureSync(`<input-field-mixin-element autocorrect="on"></input-field-mixin-element>`);
+        input = element.querySelector('[slot=input]');
+      });
+
+      it('should set autocorrect property on the host element', () => {
+        expect(element.autocorrect).to.equal('on');
+      });
+
+      it('should propagate autocorrect attribute to the input', () => {
+        expect(input.getAttribute('autocorrect')).to.equal('on');
+      });
+    });
+
+    describe('autocapitalize', () => {
+      beforeEach(() => {
+        element = fixtureSync(`<input-field-mixin-element autocapitalize="characters"></input-field-mixin-element>`);
+        input = element.querySelector('[slot=input]');
+      });
+
+      it('should set autocapitalize property on the host element', () => {
+        expect(element.autocapitalize).to.equal('characters');
+      });
+
+      it('should propagate autocapitalize attribute to the input', () => {
+        expect(input.getAttribute('autocapitalize')).to.equal('characters');
+      });
+    });
+  });
+
   describe('validation', () => {
     beforeEach(() => {
       element = fixtureSync('<input-field-mixin-element></input-field-mixin-element>');