fix(ui5-step-input): adjust z-index and fix focus issues (#13391)

There was incorrect z-index positioning of [ - ] button of the `ui5-step-input` component and as a result when there is some sticky element on page with z-index: 1, and a StepInput goes under it, the [ - ] button's icon appears over this sticky element:

<img width="779" height="392" alt="image" src="https://github.com/user-attachments/assets/6b114923-15ca-46b9-aaaa-a93a2e4e912c" />

After fixing this issue, other focus-related issues appeared, and are also fixed by this PR.

Fixes: #7709

Author: NHristov-sap

packages/main/src/StepInput.ts

@@ -483,7 +483,7 @@ class StepInput extends UI5Element implements IFormInputElement {
 
 	_onButtonFocusOut() {
 		setTimeout(() => {
-			if (!this._inputFocused) {
+			if (!this._inputFocused && !this.shadowRoot!.activeElement) {
 				this.inputOuter.removeAttribute("focused");
 			}
 		}, 0);
@@ -507,13 +507,11 @@ class StepInput extends UI5Element implements IFormInputElement {
 	}
 
 	_onMouseWheel(e: WheelEvent) {
-		if (this.disabled || this.readonly) {
+		if (this.disabled || this.readonly || !this._isFocused) {
 			return;
 		}
 
-		if (this._isFocused) {
-			e.preventDefault();
-		}
+		e.preventDefault();
 
 		const isScrollUp = e.deltaY < 0;
 		const modifier = isScrollUp ? this.step : -this.step;
@@ -767,15 +765,25 @@ class StepInput extends UI5Element implements IFormInputElement {
 		return !Number.isNaN(parsedValue) && !/, {2,}/.test(typedValue);
 	}
 
-	_decSpin() {
+	_decSpin(e: MouseEvent) {
+		if (this._isFocused || this._decIconDisabled) {
+			e.preventDefault();
+		}
 		if (!this._decIconDisabled) {
 			this._spinValue(false, true);
+		} else {
+			this.input.focus();
 		}
 	}
 
-	_incSpin() {
+	_incSpin(e: MouseEvent) {
+		if (this._isFocused || this._incIconDisabled) {
+			e.preventDefault();
+		}
 		if (!this._incIconDisabled) {
 			this._spinValue(true, true);
+		} else {
+			this.input.focus();
 		}
 	}
 

packages/main/src/themes/StepInput.css

@@ -18,6 +18,7 @@
 	box-sizing: border-box;
 	height: var(--_ui5_input_height);
 	position: relative;
+	isolation: isolate;
 	margin: var(--_ui5_input_margin_top_bottom) 0;
 	min-width: var(--_ui5_step_input_min_width);
 	text-align: right;
@@ -99,7 +100,7 @@
 	pointer-events: none;
 	border-radius: var(--sapField_BorderCornerRadius);
 	border-style: var(--_ui5_input_error_warning_border_style);
-	z-index: 1;
+	z-index: 0;
 	border-width: 0px;
 }