chore: improve input value handling

packages/ai/src/InputTemplate.tsx

@@ -45,7 +45,7 @@ export default function InputTemplate(this: Input, hooks?: { preContent: Templat
 									inner-input-with-icon={!!this.icon.length}
 									disabled={this.disabled}
 									readonly={this._readonly || this.loading}
-									value={this._innerValue}
+									value={this.value}
 									placeholder={this._placeholder}
 									maxlength={this.maxlength}
 									role={this.accInfo.role}

packages/main/src/ColorPicker.ts

@@ -159,6 +159,13 @@ class ColorPicker extends UI5Element implements IFormInputElement {
 	@property({ type: Number })
 	_alpha = 1;
 
+	/**
+	 * this is the alpha value in the input only while editing, since it can container invalid/empty values temporarily
+	 * @private
+	 */
+	@property()
+	_alphaTemp?: string;
+
 	/**
 	 * @private
 	 */
@@ -303,6 +310,7 @@ class ColorPicker extends UI5Element implements IFormInputElement {
 
 	_handleAlphaInput(e: UI5CustomEvent<Input, "input"> | UI5CustomEvent<Slider, "input">) {
 		const aphaInputValue = String(e.currentTarget.value);
+		this._alphaTemp = aphaInputValue;
 		this._alpha = parseFloat(aphaInputValue);
 		if (Number.isNaN(this._alpha)) {
 			this._alpha = 1;
@@ -447,6 +455,14 @@ class ColorPicker extends UI5Element implements IFormInputElement {
 	}
 
 	_handleAlphaChange() {
+		// parse the input value if valid or fallback to default
+		this._alpha = this._alphaTemp ? parseFloat(this._alphaTemp) : 1;
+		if (Number.isNaN(this._alpha)) {
+			this._alpha = 1;
+		}
+		// reset input value so _alpha is rendered
+		this._alphaTemp = undefined;
+		// normalize range
 		this._alpha = this._alpha < 0 ? 0 : this._alpha;
 		this._alpha = this._alpha > 1 ? 1 : this._alpha;
 

packages/main/src/ColorPickerTemplate.tsx

@@ -112,7 +112,7 @@ export default function ColorPickerTemplate(this: ColorPicker) {
 							id="alpha"
 							disabled={this.inputsDisabled}
 							class="ui5-color-channel-input"
-							value={String(this._alpha)}
+							value={this._alphaTemp ?? String(this._alpha)}
 							accessibleName={this.alphaInputLabel}
 							onChange={this._handleAlphaChange}
 							onInput={this._handleAlphaInput}

packages/main/src/Input.ts

@@ -388,16 +388,6 @@ class Input extends UI5Element implements SuggestionComponent, IFormInputElement
 	@property()
 	value = "";
 
-	/**
-	 * Defines the inner stored value of the component.
-	 *
-	 * **Note:** The property is updated upon typing. In some special cases the old value is kept (e.g. deleting the value after the dot in a float)
-	 * @default ""
-	 * @private
-	 */
-	@property({ noAttribute: true })
-	_innerValue = "";
-
 	/**
 	 * Defines the value state of the component.
 	 * @default "None"
@@ -624,7 +614,6 @@ class Input extends UI5Element implements SuggestionComponent, IFormInputElement
 	lastConfirmedValue: string
 	isTyping: boolean
 	_handleResizeBound: ResizeObserverCallback;
-	_keepInnerValue: boolean;
 	_shouldAutocomplete?: boolean;
 	_enterKeyDown?: boolean;
 	_isKeyNavigation?: boolean;
@@ -714,7 +703,6 @@ class Input extends UI5Element implements SuggestionComponent, IFormInputElement
 
 		this._handleResizeBound = this._handleResize.bind(this);
 
-		this._keepInnerValue = false;
 		this._focusedAfterClear = false;
 		this._valueStateLinks = [];
 	}
@@ -741,10 +729,6 @@ class Input extends UI5Element implements SuggestionComponent, IFormInputElement
 	}
 
 	onBeforeRendering() {
-		if (!this._keepInnerValue) {
-			this._innerValue = this.value === null ? "" : this.value;
-		}
-
 		if (this.showSuggestions) {
 			this.enableSuggestions();
 
@@ -815,9 +799,9 @@ class Input extends UI5Element implements SuggestionComponent, IFormInputElement
 		if (this._performTextSelection) {
 			// this is required to syncronize lit-html input's value and user's input
 			// lit-html does not sync its stored value for the value property when the user is typing
-			if (innerInput.value !== this._innerValue) {
-				innerInput.value = this._innerValue;
-			}
+			// if (innerInput.value !== this._innerValue) {
+			// 	innerInput.value = this._innerValue;
+			// }
 
 			if (this.typedInValue.length && this.value.length) {
 				innerInput.setSelectionRange(this.typedInValue.length, this.value.length);
@@ -1118,7 +1102,6 @@ class Input extends UI5Element implements SuggestionComponent, IFormInputElement
 			return;
 		}
 
-		this._keepInnerValue = false;
 		this.focused = false; // invalidating property
 		this._isChangeTriggeredBySuggestion = false;
 		if (this.showClearIcon && !this._effectiveShowClearIcon) {
@@ -1238,9 +1221,6 @@ class Input extends UI5Element implements SuggestionComponent, IFormInputElement
 
 	_input(e: CustomEvent<InputEventDetail> | InputEvent, eventType: string) {
 		const inputDomRef = this.getInputDOMRefSync();
-		const emptyValueFiredOnNumberInput = this.value && this.isTypeNumber && !inputDomRef!.value;
-
-		this._keepInnerValue = false;
 
 		const allowedEventTypes = [
 			"deleteWordBackward",
@@ -1260,41 +1240,6 @@ class Input extends UI5Element implements SuggestionComponent, IFormInputElement
 
 		this._shouldAutocomplete = !allowedEventTypes.includes(eventType) && !this.noTypeahead;
 
-		if (e instanceof InputEvent) {
-			// ---- Special cases of numeric Input ----
-			// ---------------- Start -----------------
-
-			// When the last character after the delimiter is removed.
-			// In such cases, we want to skip the re-rendering of the
-			// component as this leads to cursor repositioning and causes user experience issues.
-
-			// There are few scenarios:
-			// Example: type "123.4" and press BACKSPACE - the native input is firing event with the whole part as value (123).
-			// Pressing BACKSPACE again will remove the delimiter and the native input will fire event with the whole part as value again (123).
-			// Example: type "123.456", select/mark "456" and press BACKSPACE - the native input is firing event with the whole part as value (123).
-			// Example: type "123.456", select/mark "123.456" and press BACKSPACE - the native input is firing event with empty value.
-			const delimiterCase = this.isTypeNumber
-				&& (e.inputType === "deleteContentForward" || e.inputType === "deleteContentBackward")
-				&& !(e.target as HTMLInputElement).value.includes(".")
-				&& this.value.includes(".");
-
-			// Handle special numeric notation with "e", example "12.5e12"
-			const eNotationCase = emptyValueFiredOnNumberInput && e.data === "e";
-
-			// Handle special numeric notation with "-", example "-3"
-			// When pressing BACKSPACE, the native input fires event with empty value
-			const minusRemovalCase = emptyValueFiredOnNumberInput
-				&& this.value.startsWith("-")
-				&& this.value.length === 2
-				&& (e.inputType === "deleteContentForward" || e.inputType === "deleteContentBackward");
-
-			if (delimiterCase || eNotationCase || minusRemovalCase) {
-				this.value = (e.target as HTMLInputElement).value;
-				this._keepInnerValue = true;
-			}
-			// ----------------- End ------------------
-		}
-
 		if (e.target === inputDomRef) {
 			this.focused = true;
 
@@ -1340,7 +1285,6 @@ class Input extends UI5Element implements SuggestionComponent, IFormInputElement
 	_handleTypeAhead(item: IInputSuggestionItemSelectable) {
 		const value = item.text ? item.text : "";
 
-		this._innerValue = value;
 		this.value = value;
 		this._performTextSelection = true;
 

packages/main/src/InputTemplate.tsx

@@ -33,8 +33,8 @@ export default function InputTemplate(this: Input, hooks?: { preContent: Templat
 						inner-input-with-icon={!!this.icon.length}
 						disabled={this.disabled}
 						readonly={this._readonly}
+						value={this.value}
 						required={this.required}
-						value={this._innerValue}
 						placeholder={this._placeholder}
 						maxlength={this.maxlength}
 						role={this.accInfo.role}

packages/main/src/RangeSlider.ts

@@ -113,6 +113,9 @@ class RangeSlider extends SliderBase implements IFormInputElement {
 		return this._startValue;
 	}
 
+	@property()
+	startValueTemp?: string;
+
 	/**
 	 * Defines end point of a selection - position of a second handle on the slider.
 	 * @default 100
@@ -142,6 +145,9 @@ class RangeSlider extends SliderBase implements IFormInputElement {
 	@property()
 	tooltipEndValueState: `${ValueState}` = "None";
 
+	@property()
+	endValueTemp?: string;
+
 	@property({ type: Boolean })
 	rangePressed = false;
 

packages/main/test/pages/Input_old_value.html

@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+	<meta charset="UTF-8">
+	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
+	<title>ui5-input</title>
+
+
+	<script src="%VITE_BUNDLE_PATH%" type="module"></script>
+
+
+	<script>// delete Document.prototype.adoptedStyleSheets;</script>
+
+</head>
+
+<body class="input1auto">
+	<input id="inp1"/>
+	<ui5-input id="inp2" type="Number"></ui5-input>
+	<script type="module">
+		let value = "";
+
+		let internalValue = "";
+
+		inp1.addEventListener("input", (e) => {
+			if (e.target.value.length <= 3) {
+				value = e.target.value;
+			}
+			inp1.value = value;
+			inp2.value = value;
+		});
+		inp2.addEventListener("input", (e) => {
+			if (e.target.value.length <= 3) {
+				value = e.target.value;
+			}
+			inp1.value = value;
+			inp2.value = value;
+		});
+	</script>
+</body>
+
+</html>