feat: add form associated custom elements

packages/main/src/CheckBox.ts

@@ -108,6 +108,32 @@
 @event("change")
 
 class CheckBox extends UI5Element implements IFormElement {
+	static formAssociated = true;
+	get form() {
+		return this.#internals.form;
+	}
+
+	formStateRestoreCallback(value: string) {
+		this.checked = Boolean(value);
+		this._setFormValue();
+	}
+
+	formAssociatedCallback() {
+		this._setFormValue();
+	}
+
+	_setFormValue() {
+		this.#internals.setFormValue(this.checked.toString());
+	}
+
+	connectedCallback(): Promise<void> {
+		return super.connectedCallback();
+	}
+
+	onEnterDOM(): void {
+		console.log();
+	}
+
 	/**
 	 * Receives id(or many ids) of the elements that label the component
 	 * @type {string}
@@ -281,10 +307,12 @@
 
 	static i18nBundle: I18nBundle;
 	_deactivate: () => void;
+	#internals: ElementInternals;
 
 	constructor() {
 		super();
 
+		this.#internals = this.attachInternals();
 		this._deactivate = () => {
 			if (activeCb) {
 				activeCb.active = false;
@@ -368,13 +396,15 @@
 				this.checked = !this.checked;
 			}
 
+			this._setFormValue();
 			const changePrevented = !this.fireEvent("change", null, true);
 			// Angular two way data binding
 			const valueChagnePrevented = !this.fireEvent("value-changed", null, true);
 
 			if (changePrevented || valueChagnePrevented) {
 				this.checked = lastState.checked;
 				this.indeterminate = lastState.indeterminate;
+				this._setFormValue();
 			}
 		}
 		return this;

packages/main/src/Input.ts

@@ -259,6 +259,13 @@ type InputSuggestionScrollEventDetail = {
 	},
 })
 class Input extends UI5Element implements SuggestionComponent, IFormElement {
+	static formAssociated = true;
+	get form() {
+		return this._internals.form;
+	}
+	formStateRestoreCallback(value: string) {
+		this.value = value;
+	}
 	/**
 	 * Defines whether the component is in disabled state.
 	 * <br><br>
@@ -642,9 +649,12 @@ class Input extends UI5Element implements SuggestionComponent, IFormElement {
 	_performTextSelection?: boolean;
 	_previewItem?: SuggestionListItem;
 	static i18nBundle: I18nBundle;
+	_internals: ElementInternals;
 
 	constructor() {
 		super();
+		this._internals = this.attachInternals();
+
 		// Indicates if there is selected suggestionItem.
 		this.hasSuggestionItemSelected = false;
 
@@ -1365,12 +1375,17 @@ class Input extends UI5Element implements SuggestionComponent, IFormElement {
 		this.valueBeforeItemPreview = inputValue;
 
 		if (isUserInput) { // input
+			this._setFormValue();
 			this.fireEvent<InputEventDetail>(INPUT_EVENTS.INPUT, { inputType: e.inputType });
 			// Angular two way data binding
 			this.fireEvent("value-changed");
 		}
 	}
 
+	_setFormValue() {
+		this._internals.setFormValue(this.value);
+	}
+
 	async getInputValue() {
 		const domRef = this.getDomRef();
 

packages/main/src/Menu.ts

@@ -386,7 +386,7 @@ class Menu extends UI5Element {
 		}
 		if (this.open) {
 			const rootNode = this.getRootNode() as Document;
-			const opener = this.opener instanceof HTMLElement ? this.opener : rootNode && rootNode.getElementById(this.opener);
+			const opener = this.opener instanceof HTMLElement ? this.opener : rootNode && typeof rootNode.getElementById === "function" && rootNode.getElementById(this.opener);
 
 			if (opener) {
 				this.showAt(opener);

packages/main/src/MultiComboBox.ts

@@ -240,6 +240,31 @@
 })
 
 class MultiComboBox extends UI5Element {
+	static formAssociated = true;
+	private _internals: ElementInternals;
+	formStateValue?: FormData;
+
+	get form() {
+		return this._internals.form;
+	}
+
+
+	formStateRestoreCallback(formValue: FormData) {
+		this.formStateValue = formValue;
+		const [value, ...tokens] = formValue.getAll(this.getAttribute("name")!) as string[];
+		this.items.forEach(item => {
+			const idx = tokens.indexOf(item.text);
+			if (idx !== -1) {
+				item.selected = true;
+				tokens.splice(idx, 1);
+			} else {
+				item.selected = false;
+			}
+		});
+
+		this.value = value;
+	}
+
 	/**
 	 * Defines the value of the component.
 	 * <br><br>
@@ -490,6 +515,7 @@
 	constructor() {
 		super();
 
+		this._internals = this.attachInternals();
 		this._filteredItems = [];
 		this._previouslySelectedItems = [];
 		this.selectedValues = [];
@@ -506,6 +532,9 @@
 	}
 
 	onEnterDOM() {
+		if (this.formStateValue) {
+			this.formStateRestoreCallback(this.formStateValue);
+		}
 		ResizeHandler.register(this, this._handleResizeBound);
 	}
 
@@ -592,9 +621,34 @@
 			}
 		}
 
+		this._internals.setFormValue(this.buildValue());
 		this.fireEvent("input");
 	}
 
+	buildValue() {
+		const fd = new FormData();
+
+		// value is always present and always first
+		fd.append(this.getAttribute("name")!, this.value);
+		// fd.set("value", this.value);
+
+		// tokens if any
+		this._getSelectedItems().forEach(token => {
+			// fd.append("tokens", token.text);
+			// eslint-disable-next-line prefer-template
+			fd.append(this.getAttribute("name")!, token.text);
+		});
+
+		// const obj = { value: this.value, tokens: this._getSelectedItems().map(t => t.text) };
+		// const blob = new Blob([JSON.stringify(obj, null, 2)], {
+		// 	type: "application/json",
+		// });
+		// // return blob;
+		// fd.set(this.getAttribute("name")!, blob);
+
+		return fd;
+	}
+
 	_tokenDelete(e: CustomEvent<TokenizerTokenDeleteEventDetail>) {
 		this._previouslySelectedItems = this._getSelectedItems();
 		const token: Token = e.detail.ref;
@@ -777,6 +831,7 @@
 			});
 		} else {
 			this.value = pastedText;
+			this._internals.setFormValue(this.buildValue());
 			this.fireEvent("input");
 		}
 	}
@@ -1297,6 +1352,7 @@
 				}
 			}
 
+			this._internals.setFormValue(this.buildValue());
 			this.fireEvent("input");
 		}
 
@@ -1314,6 +1370,7 @@
 	}
 
 	fireSelectionChange() {
+		this._internals.setFormValue(this.buildValue());
 		const changePrevented = !this.fireEvent<MultiComboBoxSelectionChangeEventDetail>("selection-change", {
 			items: this._getSelectedItems(),
 		}, true);
@@ -1419,6 +1476,7 @@
 		this._filteredItems.forEach(item => {
 			item.selected = this._previouslySelectedItems.includes(item);
 		});
+		this._internals.setFormValue(this.buildValue());
 	}
 
 	onBeforeRendering() {

packages/main/src/MultiInput.ts

@@ -92,6 +92,8 @@ type MultiInputTokenDeleteEventDetail = {
 })
 
 class MultiInput extends Input {
+	static formAssociated = true;
+
 	/**
 	 * Determines whether a value help icon will be visualized in the end of the input.
 	 * Pressing the icon will fire <code>value-help-trigger</code> event.

packages/main/src/RadioButton.ts

@@ -1,5 +1,5 @@
 import { isDesktop } from "@ui5/webcomponents-base/dist/Device.js";
 import { getFeature } from "@ui5/webcomponents-base/dist/FeaturesRegistry.js";
 import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
 import property from "@ui5/webcomponents-base/dist/decorators/property.js";
 import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js";
@@ -22,7 +22,7 @@
 import RadioButtonGroup from "./RadioButtonGroup.js";
 import WrappingType from "./types/WrappingType.js";
 import type { IFormElement } from "./features/InputElementsFormSupport.js";
 import type FormSupport from "./features/InputElementsFormSupport.js";
 
 // Template
 import RadioButtonTemplate from "./generated/templates/RadioButtonTemplate.lit.js";
@@ -93,6 +93,17 @@
 @event("change")
 
 class RadioButton extends UI5Element implements IFormElement {
+	static formAssociated = true;
+
+	formStateRestoreCallback(value: string) {
+		this.checked = (this.value === value);
+		this._setFormValue();
+	}
+
+	formAssociatedCallback() {
+		this._setFormValue();
+	}
+
 	/**
 	 * Defines whether the component is disabled.
 	 * <br><br>
@@ -279,10 +290,6 @@
 	_checked!: boolean;
 	_internals: ElementInternals;
 
-	static get formAssociated() {
-		return true;
-	}
-
 	static i18nBundle: I18nBundle;
 
 	constructor() {
@@ -308,8 +315,6 @@
 
 	onBeforeRendering() {
 		this.syncGroup();
-
-		this._enableFormSupport();
 	}
 
 	onExitDOM() {
@@ -348,16 +353,6 @@
 		this._checked = this.checked;
 	}
 
-	_enableFormSupport() {
-		const formSupport = getFeature<typeof FormSupport>("FormSupport");
-
-		if (formSupport) {
-			this._setFormValue();
-		} else if (this.value) {
-			console.warn(`In order for the "value" property to have effect, you should also: import "@ui5/webcomponents/dist/features/InputElementsFormSupport.js";`); // eslint-disable-line
-		}
-	}
-
 	_setFormValue() {
 		this._internals.setFormValue(this.checked ? this.value : null);
 	}
@@ -450,6 +445,7 @@
 
 		if (!this.name) {
 			this.checked = !this.checked;
+			this._setFormValue();
 			this.fireEvent("change");
 			return this;
 		}

packages/main/src/RadioButtonGroup.ts

@@ -165,6 +165,7 @@ class RadioButtonGroup {
 	static _deselectRadio(radioBtn: RadioButton) {
 		if (radioBtn) {
 			radioBtn.checked = false;
+			radioBtn._setFormValue();
 		}
 	}
 
@@ -173,6 +174,7 @@ class RadioButtonGroup {
 			radioBtn.focus();
 			radioBtn.checked = true;
 			radioBtn._checked = true;
+			radioBtn._setFormValue();
 			radioBtn.fireEvent("change");
 		}
 	}

packages/main/src/Select.ts

@@ -212,6 +212,17 @@
  */
 @event("close")
 class Select extends UI5Element implements IFormElement {
+	static formAssociated = true;
+	formStateValue?: string;
+	get form() {
+		return this.#internals.form;
+	}
+	formStateRestoreCallback(value: string) {
+		this.formStateValue = value;
+		this.options.forEach(option => {
+			option.selected = option.value === value;
+		});
+	}
 	static i18nBundle: I18nBundle;
 
 	/**
@@ -436,10 +447,12 @@
 	_onMenuChange: (e: CustomEvent<SelectMenuChange>) => void;
 	_attachMenuListeners: (menu: HTMLElement) => void;
 	_detachMenuListeners: (menu: HTMLElement) => void;
+	#internals: ElementInternals;
 
 	constructor() {
 		super();
 
+		this.#internals = this.attachInternals();
 		this._syncedOptions = [];
 		this._selectedIndexBeforeOpen = -1;
 		this._escapePressed = false;
@@ -789,6 +802,7 @@
 		this.selectOptions[this._selectedIndex].selected = false;
 
 		if (this._selectedIndex !== index) {
+			this.#internals.setFormValue(this.selectOptions[index].value);
 			this.fireEvent<SelectLiveChangeEventDetail>("live-change", { selectedOption: this.selectOptions[index] });
 		}
 
@@ -1126,6 +1140,13 @@
 		}
 	}
 
+	onEnterDOM(): void {
+		if (this.formStateValue) {
+			this.formStateRestoreCallback(this.formStateValue);
+			// TODO remove
+		}
+	}
+
 	get selectedOptionIcon() {
 		return this.selectedOption && this.selectedOption.icon;
 	}