fix(framework): attach element internals only once (#9714)

Update the constructor of each UI5Element to use attachInternals directly. This ensures that the ElementInternals are attached only once per component. Also, this change helps prepare for future improvements to component CustomState. Fixes: #9713
SAP · Aug 21, 2024 · fce5d11 · fce5d11
1 parent 96544ef
commit fce5d11
Show file tree

Hide file tree

Showing 9 changed files with 21 additions and 27 deletions.
diff --git a/packages/base/src/UI5Element.ts b/packages/base/src/UI5Element.ts
@@ -35,7 +35,7 @@ import type {
 	ComponentStylesData,
 	ClassMap,
 } from "./types.js";
-import { attachFormElementInternals, setFormValue } from "./features/InputElementsFormSupport.js";
+import { updateFormValue, setFormValue } from "./features/InputElementsFormSupport.js";
 import type { IFormInputElement } from "./features/InputElementsFormSupport.js";
 import { getComponentFeature, subscribeForFeatureLoad } from "./FeaturesRegistry.js";
 
@@ -158,7 +158,7 @@ abstract class UI5Element extends HTMLElement {
 	_domRefReadyPromise: Promise<void> & { _deferredResolve?: PromiseResolve };
 	_doNotSyncAttributes: Set<string>;
 	_state: State;
-	_internals?: ElementInternals;
+	_internals: ElementInternals;
 	_getRealDomRef?: () => HTMLElement;
 
 	static template?: TemplateFunction;
@@ -203,6 +203,7 @@ abstract class UI5Element extends HTMLElement {
 				this.initializedProperties.set(propertyName, value);
 			}
 		});
+		this._internals = this.attachInternals();
 
 		this._initShadowRoot();
 	}
@@ -613,7 +614,7 @@ abstract class UI5Element extends HTMLElement {
 			return;
 		}
 
-		attachFormElementInternals(this);
+		updateFormValue(this);
 	}
 
 	static get formAssociated() {
@@ -1273,10 +1274,10 @@ abstract class UI5Element extends HTMLElement {
 		return this._metadata;
 	}
 
-	get validity() { return this._internals?.validity; }
-	get validationMessage() { return this._internals?.validationMessage; }
-	checkValidity() { return this._internals?.checkValidity(); }
-	reportValidity() { return this._internals?.reportValidity(); }
+	get validity() { return this._internals.validity; }
+	get validationMessage() { return this._internals.validationMessage; }
+	checkValidity() { return this._internals.checkValidity(); }
+	reportValidity() { return this._internals.reportValidity(); }
 }
 
 /**

diff --git a/packages/base/src/features/InputElementsFormSupport.ts b/packages/base/src/features/InputElementsFormSupport.ts
@@ -1,20 +1,14 @@
 import type UI5Element from "../UI5Element.js";
 
-interface IFormElement extends UI5Element {
-	_internals?: ElementInternals;
-}
-
-interface IFormInputElement extends IFormElement {
+interface IFormInputElement extends UI5Element {
 	name?: string;
 	formFormattedValue: FormData | string | null;
 	formValidityMessage?: string;
 	formValidity?: ValidityStateFlags;
 	formElementAnchor?: () => HTMLElement | undefined | Promise<HTMLElement | undefined>;
 }
 
-const attachFormElementInternals = (element: IFormInputElement | IFormElement) => {
-	element._internals = element.attachInternals();
-
+const updateFormValue = (element: IFormInputElement | UI5Element) => {
 	if (isInputElement(element)) {
 		setFormValue(element);
 	}
@@ -47,20 +41,20 @@ const setFormValidity = async (element: IFormInputElement) => {
 	}
 };
 
-const submitForm = (element: IFormElement) => {
+const submitForm = (element: UI5Element) => {
 	element._internals?.form?.requestSubmit();
 };
 
-const resetForm = (element: IFormElement) => {
+const resetForm = (element: UI5Element) => {
 	element._internals?.form?.reset();
 };
 
-const isInputElement = (element: IFormInputElement | IFormElement): element is IFormInputElement => {
+const isInputElement = (element: IFormInputElement | UI5Element): element is IFormInputElement => {
 	return "formFormattedValue" in element && "name" in element;
 };
 
 export {
-	attachFormElementInternals,
+	updateFormValue,
 	setFormValue,
 	setFormValidity,
 	submitForm,
@@ -69,5 +63,4 @@ export {
 
 export type {
 	IFormInputElement,
-	IFormElement,
 };
diff --git a/packages/main/src/Button.ts b/packages/main/src/Button.ts
@@ -26,7 +26,6 @@ import {
 import willShowContent from "@ui5/webcomponents-base/dist/util/willShowContent.js";
 import { submitForm, resetForm } from "@ui5/webcomponents-base/dist/features/InputElementsFormSupport.js";
 import { getEnableDefaultTooltips } from "@ui5/webcomponents-base/dist/config/Tooltips.js";
-import type { IFormElement } from "@ui5/webcomponents-base/dist/features/InputElementsFormSupport.js";
 import ButtonDesign from "./types/ButtonDesign.js";
 import ButtonType from "./types/ButtonType.js";
 import type ButtonAccessibleRole from "./types/ButtonAccessibleRole.js";
@@ -108,7 +107,7 @@ type ButtonAccessibilityAttributes = Pick<AccessibilityAttributes, "expanded" |
  * @private
  */
 @event("_active-state-change")
-class Button extends UI5Element implements IButton, IFormElement {
+class Button extends UI5Element implements IButton {
 	/**
 	 * Defines the component design.
 	 * @default "Default"

diff --git a/packages/main/src/ComboBox.ts b/packages/main/src/ComboBox.ts
@@ -946,7 +946,7 @@ class ComboBox extends UI5Element implements IFormInputElement {
 				this._closeRespPopover();
 				this.focused = true;
 				this.inner.setSelectionRange(this.value.length, this.value.length);
-			} else if (this._internals?.form) {
+			} else if (this._internals.form) {
 				submitForm(this);
 			}
 		}

diff --git a/packages/main/src/DatePicker.ts b/packages/main/src/DatePicker.ts
@@ -484,7 +484,7 @@ class DatePicker extends DateComponentBase implements IFormInputElement {
 		}
 
 		if (isEnter(e)) {
-			if (this._internals?.form) {
+			if (this._internals.form) {
 				submitForm(this);
 			}
 		} else if (isPageUpShiftCtrl(e)) {

diff --git a/packages/main/src/Input.ts b/packages/main/src/Input.ts
@@ -858,7 +858,7 @@ class Input extends UI5Element implements SuggestionComponent, IFormInputElement
 		if (!suggestionItemPressed) {
 			this.lastConfirmedValue = this.value;
 
-			if (this._internals?.form) {
+			if (this._internals.form) {
 				submitForm(this);
 			}
 

diff --git a/packages/main/src/MultiComboBox.ts b/packages/main/src/MultiComboBox.ts
@@ -1283,7 +1283,7 @@ class MultiComboBox extends UI5Element implements IFormInputElement {
 		const oldValueState = this.valueState;
 		const innerInput = this._innerInput;
 
-		if (this._internals?.form) {
+		if (this._internals.form) {
 			submitForm(this);
 		}
 

diff --git a/packages/main/src/TimePicker.ts b/packages/main/src/TimePicker.ts
@@ -602,7 +602,7 @@ class TimePicker extends UI5Element implements IFormInputElement {
 		}
 
 		if (isEnter(e)) {
-			if (this._internals?.form) {
+			if (this._internals.form) {
 				submitForm(this);
 			}
 		} else if (isPageUpShiftCtrl(e)) {

diff --git a/packages/main/test/pages/Input.html b/packages/main/test/pages/Input.html
@@ -15,6 +15,7 @@
 </head>
 
 <body class="input1auto">
+	<form id="content"></form>
 	<h3> Input with suggestions: type 'a'</h3>
 	<ui5-label id="myLabelChange">Event [change] :: N/A</ui5-label><br />
 	<ui5-label id="myLabelInputChange">Event [input] :: N/A</ui5-label><br />