feat(input): elementinternals implementation for input component (#220)

* feat(input): input as native form elements

* chore(input): add element-internals-polyfill to support safari

* refactor(input): validation state with elementinternals

* refactor(input): elementinternals for input

* feat(input): elementinternals implementation for input

Co-authored-by: Levent Anil Ozen <[email protected]>

package.json

@@ -59,6 +59,9 @@
     "@floating-ui/dom": "^0.5.4",
     "@fontsource/rubik": "^4.5.9",
     "@lit-labs/react": "^1.0.7",
+    "@open-wc/form-control": "^0.4.1",
+    "@open-wc/form-helpers": "^0.1.2",
+    "element-internals-polyfill": "^1.1.11",
     "lit": "^2.2.3"
   },
   "engines": {

src/components/button/bl-button.ts

@@ -72,6 +72,12 @@ export default class BlButton extends LitElement {
   @property({ type: String })
   target?: TargetType = '_self';
 
+  /**
+   * Sets the type of the button. Set `submit` to use button as the submitter of parent form.
+   */
+   @property({ type: String })
+   type: 'submit' | null;
+
   /**
    * Fires when button clicked
    */

src/components/input/bl-input.css

@@ -37,14 +37,14 @@ input:focus {
   --bl-input-border-color: var(--bl-color-primary);
 }
 
-input:focus ~ bl-icon {
-  --bl-input-icon-color: var(--bl-color-primary);
-}
-
 :host([label-fixed]) bl-icon {
   top: calc(var(--bl-input-padding-vertical) + var(--bl-size-m));
 }
 
+input:focus ~ bl-icon {
+  --bl-input-icon-color: var(--bl-color-primary);
+}
+
 :host ::placeholder {
   color: var(--bl-color-content-tertiary);
 }

src/components/input/bl-input.stories.mdx

@@ -99,7 +99,7 @@ export const LabelStylesTemplate = args => html`
 
 Input component is the component for taking text input from user.
 
-<bl-alert variant="warning" icon caption="Note">Inline styles in examples are only for **demo purposes**. Use regular CSS classes or tag selectors to set styles.</bl-alert>
+<bl-alert variant="warning" icon>Inline styles in examples are only for **demo purposes**. Use regular CSS classes or tag selectors to set styles.</bl-alert>
 
 ## Basic Usage
 
@@ -135,6 +135,9 @@ If you want to use always it on top of the input, then you can use `label-fixed`
   <Story name="Input Without Label" args={{ placeholder: 'Enter Your Name' }}>
     {SingleInputTemplate.bind({})}
   </Story>
+  <Story name="Input with value" args={{ label: 'Your name', placeholder: 'Name Surname', value: 'Random User' }}>
+    {SingleInputTemplate.bind({})}
+  </Story>
 </Canvas>
 
 ## Input Help Text
@@ -200,6 +203,34 @@ Inputs have 2 size options: `medium` and `large`. `medium` size is default and i
   </Story>
 </Canvas>
 
+## Using within a form
+
+Input component uses [ElementInternals](https://developer.mozilla.org/en-US/docs/Web/API/ElementInternals) to associate with it's parent form automatically. When you use `bl-input` within a form with a `name` attribute, input's value will be automatically set parent form's FormData. Check the example below:
+
+```html
+<form novalidate>
+  <bl-input name="name" label="Your Name"></bl-input>
+  <bl-input name="age" type="number" required min="18" label="Age"></bl-input>
+
+  <button type="submit">Submit</button>
+</form>
+
+<script>
+  document.querySelector('form').addEventListener('submit', (event) => {
+    event.preventDefault();
+    const formData = new FormData(event.target);
+
+    for (const [key, value] of formData.entries()) {
+      console.log(key, value);
+    }
+  });
+</script>
+```
+
+When you run this example and submit the form, you'll see key/value pairs of the inputs in the console.
+
+<bl-alert icon>If user presses `Enter` key in an input inside a form, this will trigger submit of the form. This behaviour mimics the native input behaviour.</bl-alert>
+
 ## Reference
 
 <ArgsTable of="bl-input" />

src/components/input/bl-input.test.ts

@@ -1,4 +1,4 @@
-import { assert, expect, fixture, oneEvent, html } from '@open-wc/testing';
+import { assert, expect, fixture, oneEvent, html, elementUpdated } from '@open-wc/testing';
 import BlInput from './bl-input';
 
 describe('bl-input', () => {
@@ -73,6 +73,11 @@ describe('bl-input', () => {
       const el = await fixture<BlInput>(
         html`<bl-input required invalid-text="${errorMessage}"></bl-input>`
       );
+
+      el.reportValidity();
+
+      await elementUpdated(el);
+
       const errorMessageElement = <HTMLParagraphElement>(
         el.shadowRoot?.querySelector('.invalid-text')
       );
@@ -86,6 +91,9 @@ describe('bl-input', () => {
     it('should show error when reportValidity method called', async () => {
       const el = await fixture<BlInput>(html`<bl-input required></bl-input>`);
       el.reportValidity();
+
+      await elementUpdated(el);
+
       expect(el.validity.valid).to.be.false;
       const errorMessageElement = <HTMLParagraphElement>(
         el.shadowRoot?.querySelector('.invalid-text')
@@ -125,4 +133,59 @@ describe('bl-input', () => {
       expect(ev.detail).to.be.equal('some value');
     });
   });
+
+  describe('form integration', () => {
+    it('should show errors when parent form is submitted', async () => {
+      const form = await fixture<HTMLFormElement>(html`<form novalidate>
+        <bl-input required></bl-input>
+      </form>`);
+
+      const blInput = form.querySelector<BlInput>('bl-input');
+
+      form.addEventListener('submit', e => e.preventDefault());
+
+      form.dispatchEvent(new SubmitEvent('submit', {cancelable: true}));
+
+      await elementUpdated(form);
+
+      const errorMessageElement = <HTMLParagraphElement>(
+        blInput?.shadowRoot?.querySelector('.invalid-text')
+      );
+
+      expect(blInput?.validity.valid).to.be.false;
+
+      expect(errorMessageElement).to.exist;
+
+    });
+
+    it('should submit parent form when pressed Enter key', async () => {
+      const form = await fixture<HTMLFormElement>(html`<form novalidate>
+        <bl-input name="user" value="name"></bl-input>
+        <button type="submit">Submit</button>
+      </form>`);
+
+      const blInput = form.querySelector<BlInput>('bl-input');
+
+      await elementUpdated(form);
+
+      const submitEvent = new Promise(resolve => {
+        function listener(ev: SubmitEvent) {
+          ev.preventDefault();
+          resolve(ev);
+          form.removeEventListener('submit', listener);
+        }
+        form.addEventListener('submit', listener);
+      });
+
+      const enterEvent = new KeyboardEvent('keydown', {
+        code: 'Enter',
+        cancelable: true
+      });
+
+      blInput?.dispatchEvent(enterEvent);
+
+      const ev = await submitEvent;
+      expect(ev).to.exist;
+    });
+  });
 });