From 5fa8c56f06c70202fc578d5d9c4c1b556ecd1c5f Mon Sep 17 00:00:00 2001
From: Peter Skelin <petar.skelin@sap.com>
Date: Thu, 30 Oct 2025 10:18:39 +0200
Subject: [PATCH] chore: remove dom state

---
 packages/main/src/SliderTooltip.ts          | 35 ++++++++++++---------
 packages/main/src/SliderTooltipTemplate.tsx |  3 +-
 2 files changed, 23 insertions(+), 15 deletions(-)

diff --git a/packages/main/src/SliderTooltip.ts b/packages/main/src/SliderTooltip.ts
index 25111461f523..badaad2344e9 100644
--- a/packages/main/src/SliderTooltip.ts
+++ b/packages/main/src/SliderTooltip.ts
@@ -44,8 +44,20 @@ class SliderTooltip extends UI5Element {
 		"forward-focus": void
 	};
 
+	// _innerValue is set when the user types in the input field, but if an API value is set, it should be ignored
+	@property({ noAttribute: true })
+	_innerValue?: string;
+
+	private _value?: string;
+
 	@property()
-	value?: string;
+	set value(val: string | undefined) {
+		this._innerValue = undefined;
+		this._value = val;
+	}
+	get value() {
+		return this._value;
+	}
 
 	@property()
 	inputValue?: string;
@@ -93,6 +105,7 @@ class SliderTooltip extends UI5Element {
 				this.repositionTooltip();
 				this.attachGlobalScrollHandler();
 			} else {
+				this._innerValue = undefined;
 				this.hidePopover();
 				this.detachGlobalScrollHandler();
 			}
@@ -136,19 +149,18 @@ class SliderTooltip extends UI5Element {
 		if (isF2(e) || isTabNext(e)) {
 			e.preventDefault();
 
-			if (!this.isValueValid(this.inputRef.value)) {
-				const value = this.value;
-				this.inputRef.value = value || "";
+			if (!this.isValueValid(this._innerValue ?? "")) {
+				this._innerValue = undefined;
 			}
 
 			this.valueState = ValueState.None;
 
-			this.fireDecoratorEvent("change", { value: this.inputRef.value });
+			this.fireDecoratorEvent("change", { value: this._innerValue ?? "" });
 			this.fireDecoratorEvent("forward-focus");
 		}
 
 		if (isEnter(e)) {
-			if (!this.isValueValid(this.inputRef.value)) {
+			if (!this.isValueValid(this._innerValue ?? "")) {
 				this.valueState = ValueState.Negative;
 
 				return;
@@ -156,7 +168,7 @@ class SliderTooltip extends UI5Element {
 
 			this.valueState = ValueState.None;
 
-			this.fireDecoratorEvent("change", { value: this.inputRef.value });
+			this.fireDecoratorEvent("change", { value: this._innerValue ?? "" });
 		}
 	}
 
@@ -168,9 +180,8 @@ class SliderTooltip extends UI5Element {
 	}
 
 	_onInputFocusOut(e: FocusEvent) {
-		if (!this.isValueValid(this.inputRef.value)) {
-			const value = this.value;
-			this.inputRef.value = value || "";
+		if (!this.isValueValid(this._innerValue ?? "")) {
+			this._innerValue = undefined;
 		}
 
 		const relatedTarget = e.relatedTarget as HTMLElement;
@@ -180,10 +191,6 @@ class SliderTooltip extends UI5Element {
 		}
 	}
 
-	get inputRef() {
-		return this.shadowRoot?.querySelector("ui5-input") as Input;
-	}
-
 	get _ariaLabelledByInputText() {
 		return SliderTooltip.i18nBundle.getText(SLIDER_TOOLTIP_INPUT_LABEL);
 	}
diff --git a/packages/main/src/SliderTooltipTemplate.tsx b/packages/main/src/SliderTooltipTemplate.tsx
index 198f8474dc12..9ae35ce63d57 100644
--- a/packages/main/src/SliderTooltipTemplate.tsx
+++ b/packages/main/src/SliderTooltipTemplate.tsx
@@ -6,9 +6,10 @@ export default function SliderTooltipTemplate(this: SliderTooltip) {
 		<div class="ui5-slider-tooltip-root">
 			{this.editable ?
 				<Input
-					value={this.value}
+					value={this._innerValue ?? this.value}
 					type="Number"
 					accessibleNameRef="ui5-slider-InputLabel"
+					onInput={ e => { this._innerValue = e.currentTarget.value } }
 					onKeyDown={this._keydown}
 					onFocusIn={this._onInputFocusin}
 					onFocusOut={this._onInputFocusOut}