fix(field): sync name down instead of delegating

Author: daKmoR

packages/field/src/LionField.js

@@ -47,8 +47,8 @@ export class LionField extends FormControlMixin(
     return {
       ...super.delegations,
       target: () => this.inputElement,
-      properties: [...super.delegations.properties, 'name', 'type'],
-      attributes: [...super.delegations.attributes, 'name', 'type'],
+      properties: [...super.delegations.properties, 'type'],
+      attributes: [...super.delegations.attributes, 'type'],
     };
   }
 
@@ -58,6 +58,10 @@ export class LionField extends FormControlMixin(
         // make sure validation can be triggered based on observer
         type: Boolean,
       },
+      name: {
+        type: String,
+        reflect: true,
+      },
     };
   }
 
@@ -104,6 +108,12 @@ export class LionField extends FormControlMixin(
     return (this.inputElement && this.inputElement.value) || '';
   }
 
+  constructor() {
+    super();
+    this.name = '';
+    this.submitted = false;
+  }
+
   connectedCallback() {
     super.connectedCallback();
 
@@ -138,6 +148,10 @@ export class LionField extends FormControlMixin(
         this.classList.remove('state-disabled'); // eslint-disable-line wc/no-self-class
       }
     }
+
+    if (changedProps.has('name')) {
+      this.inputElement.name = this.name;
+    }
   }
 
   /**

packages/field/test/lion-field.test.js

@@ -116,6 +116,18 @@ describe('<lion-field>', () => {
     expect(el.$$slot('input').value).to.equal('one');
   });
 
+  it('has a name which is reflected to an attribute and is synced down to the native input', async () => {
+    const el = await fixture(`<${tagString}>${inputSlotString}</${tagString}>`);
+    expect(el.name).to.equal('');
+    expect(el.getAttribute('name')).to.equal('');
+    expect(el.inputElement.getAttribute('name')).to.equal('');
+
+    el.name = 'foo';
+    await el.updateComplete;
+    expect(el.getAttribute('name')).to.equal('foo');
+    expect(el.inputElement.getAttribute('name')).to.equal('foo');
+  });
+
   // TODO: find out if we could put all listeners on this.value (instead of this.inputElement.value)
   // and make it act on this.value again
   it('has a class "state-filled" if this.value is filled', async () => {