fix: add hidden input for lit-element after render completes (#27)

* fix: add hidden input for lit-element after render completes

* chore(release): 0.1.10

* chore(release): 0.1.11

* chore(release): 0.1.12

* chore(release): 0.1.13

* Add null type to setFormValue

* chore(release): 0.1.14

Co-authored-by: Brion Fuller <[email protected]>

Author: brion-fuller

Diff for: CHANGELOG.md

@@ -2,6 +2,21 @@
 
 All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
 
+### [0.1.14](https://github.com/calebdwilliams/element-internals-polyfill/compare/v0.1.13...v0.1.14) (2021-03-08)
+
+### [0.1.13](https://github.com/calebdwilliams/element-internals-polyfill/compare/v0.1.12...v0.1.13) (2021-03-08)
+
+### [0.1.12](https://github.com/calebdwilliams/element-internals-polyfill/compare/v0.1.11...v0.1.12) (2021-03-08)
+
+### [0.1.11](https://github.com/calebdwilliams/element-internals-polyfill/compare/v0.1.10...v0.1.11) (2021-03-08)
+
+### [0.1.10](https://github.com/calebdwilliams/element-internals-polyfill/compare/v0.1.9...v0.1.10) (2021-03-08)
+
+
+### Bug Fixes
+
+* add hidden input for lit-element after render completes ([0b93a0a](https://github.com/calebdwilliams/element-internals-polyfill/commit/0b93a0a94158ca83caa82a1b9bd1a3381ca7b322))
+
 ### [0.1.9](https://github.com/calebdwilliams/element-internals-polyfill/compare/v0.1.8...v0.1.9) (2021-02-23)
 
 

Diff for: package-lock.json

@@ -1,6 +1,6 @@
 {
-  "name": "element-internals-polyfill",
-  "version": "0.1.9",
+  "name": "@simplex/element-internals-polyfill",
+  "version": "0.1.14",
   "description": "A polyfill for the element internals specification",
   "main": "dist/index.js",
   "module": "dist/index.js",
@@ -19,6 +19,9 @@
     "release": "standard-version",
     "postrelease": "git push --follow-tags origin master; npm publish"
   },
+  "publishConfig": {
+    "registry": "https://pkgs.dev.azure.com/daimler-mic/_packaging/mercedes-developer-experience/npm/registry/"
+  },
   "repository": {
     "type": "git",
     "url": "git+https://github.com/calebdwilliams/element-internals-polyfill.git"

Diff for: package.json

@@ -142,7 +142,7 @@ export class ElementInternals implements IElementInternals {
   }
 
   /** Sets the element's value within the form */
-  setFormValue(value: string | FormData): void {
+  setFormValue(value: string | FormData | null): void {
     const ref = refMap.get(this);
     throwIfNotFormAssociated(ref, `Failed to execute 'setFormValue' on 'ElementInternals': The target element is not a form-associated custom element.`);
     removeHiddenInputs(this);

Diff for: src/element-internals.ts

@@ -40,17 +40,25 @@ export interface IAom {
 export interface IElementInternals extends IAom {
   checkValidity: () => boolean;
   form: HTMLFormElement;
-  labels: NodeListOf<HTMLLabelElement>|[];
+  labels: NodeListOf<HTMLLabelElement> | [];
   reportValidity: () => boolean;
-  setFormValue: (value: string | FormData) => void;
-  setValidity: (validityChanges: Partial<globalThis.ValidityState>, validationMessage?: string, anchor?: HTMLElement) => void;
+  setFormValue: (value: string | FormData | null) => void;
+  setValidity: (
+    validityChanges: Partial<globalThis.ValidityState>,
+    validationMessage?: string,
+    anchor?: HTMLElement
+  ) => void;
   validationMessage: string;
   validity: globalThis.ValidityState;
   willValidate: boolean;
 }
 
 export interface ICustomElement extends HTMLElement {
-  attributeChangedCallback?: (name: string, oldValue: any, newValue: any) => void;
+  attributeChangedCallback?: (
+    name: string,
+    oldValue: any,
+    newValue: any
+  ) => void;
   connectedCallback?: () => void;
   disconnectedCallback?: () => void;
   attachedCallback?: () => void;
@@ -60,4 +68,8 @@ export interface ICustomElement extends HTMLElement {
   disabled?: boolean;
 }
 
-export type LabelsList = NodeListOf<HTMLLabelElement>|[];
+export interface ILitElement extends ICustomElement {
+  updateComplete: Promise<void>;
+}
+
+export type LabelsList = NodeListOf<HTMLLabelElement> | [];

Diff for: src/types.ts

@@ -1,5 +1,5 @@
 import { hiddenInputMap, formsMap, formElementsMap, internalsMap } from './maps.js';
-import { ICustomElement, IElementInternals, LabelsList } from './types.js';
+import { ICustomElement, IElementInternals, ILitElement, LabelsList } from './types.js';
 
 const observerConfig: MutationObserverInit = { attributes: true };
 
@@ -47,11 +47,15 @@ export const removeHiddenInputs = (internals: IElementInternals): void => {
  * @param {IElementInternals} internals - The element internals instance for the ref
  * @return {HTMLInputElement} The hidden input
  */
-export const createHiddenInput = (ref: ICustomElement, internals: IElementInternals): HTMLInputElement | null => {
+export const createHiddenInput = (ref: ICustomElement | ILitElement, internals: IElementInternals): HTMLInputElement | null => {
   const input = document.createElement('input');
   input.type = 'hidden';
   input.name = ref.getAttribute('name');
-  ref.after(input);
+  if ((<ILitElement>ref).updateComplete) {
+    (<ILitElement>ref).updateComplete.then(() => ref.after(input));
+  } else {
+    ref.after(input);
+  }
   hiddenInputMap.get(internals).push(input);
   return input;
 }