fix(ui5-split-button): fire click event when focused with shift + tab (#11197)

### Main Problem
There was an issue, where if the `ui5-split-button` was to be focused by using `Shift + Tab` combination, the `click` event wasn't firing, after the first time a default action was executed (pressed `Enter` or `Space`).

The reason behind this, was a flag called `_shiftOrEscapePressed`.
Since the component has a handler for `focus-in` event which was just early returning if the component `matches` the `:focus-within` CSS selector, which was causing the flag to NOT reset. Therefore the component wasn't firing `click` event, due to the condition:

```ts
_fireClick(e?: Event) {
   e?.stopPropagation();
   if (!this._shiftOrEscapePressed) {
      this.fireDecoratorEvent("click");
   }
   this._shiftOrEscapePressed = false;
}
```

### Solutions

 - We solved few issues, by introducing a new flag called `_shiftOrEscapePressedDuringSpace`, which handles the cases only when `Shift` or `Escape` keys are pressed simultaneously with the `Space` Bar.
 - Deleted an unused forgotten flag;
 - Handled an issue where the arrow button was being 'frozen' if simultaneously pressing `ArrowUp/Down` keys and `Tab/Shift + Tab`.
 - `Shift/Escape` keys now correctly prevent events from firing;
 - Fixed a bug where `arrow-button` fired `click` **AND** `arrow-click` events.

Author: hinzzx

packages/main/src/SplitButton.ts

@@ -165,20 +165,12 @@ class SplitButton extends UI5Element {
 	_tabIndex = 0
 
 	/**
-	 * Indicates if there is Space key pressed
+	 * Indicates if there is Shift or Escape key pressed while Space key is down.
 	 * @default false
 	 * @private
 	 */
 	@property({ type: Boolean, noAttribute: true })
-	_spacePressed = false;
-
-	/**
-	 * Indicates if there is SHIFT or ESCAPE key pressed
-	 * @default false
-	 * @private
-	 */
-	@property({ type: Boolean, noAttribute: true })
-	_shiftOrEscapePressed = false;
+	_shiftOrEscapePressedDuringSpace = false;
 
 	/**
 	 * Defines the active state of the text button
@@ -227,9 +219,6 @@ class SplitButton extends UI5Element {
 	@slot({ type: Node, "default": true })
 	text!: Array<Node>;
 
-	_isDefaultActionPressed = false;
-	_isKeyDownOperation = false;
-
 	@i18n("@ui5/webcomponents")
 	static i18nBundle: I18nBundle;
 
@@ -248,17 +237,10 @@ class SplitButton extends UI5Element {
 			return;
 		}
 
-		this._shiftOrEscapePressed = false;
+		this._resetActionButtonStates();
 		this._setTabIndexValue();
 	}
 
-	_onFocusIn() {
-		if (this.disabled || this.getFocusDomRef()!.matches(":has(:focus-within)")) {
-			return;
-		}
-		this._shiftOrEscapePressed = false;
-	}
-
 	handleTouchStart(e: TouchEvent | MouseEvent) {
 		e.stopPropagation();
 		this._textButtonActive = true;
@@ -273,59 +255,65 @@ class SplitButton extends UI5Element {
 	}
 
 	_onKeyDown(e: KeyboardEvent) {
-		this._isKeyDownOperation = true;
 		if (this._isArrowKeyAction(e)) {
 			this._handleArrowButtonAction(e);
 			this._activeArrowButton = true;
-		} else if (this._isDefaultAction(e)) {
+			return;
+		}
+
+		if (this._isDefaultAction(e)) {
 			this._handleDefaultAction(e);
-			this._isDefaultActionPressed = true;
+			return;
 		}
 
-		if (this._spacePressed && this._isShiftOrEscape(e)) {
-			this._handleShiftOrEscapePressed();
+		if ((isShift(e) || isEscape(e)) && this._textButtonActive) {
+			e.preventDefault();
+			this._shiftOrEscapePressedDuringSpace = true;
 		}
 
-		// Handles button freeze issue when pressing Enter/Space and navigating with Tab/Shift+Tab simultaneously.
-		if (this._isDefaultActionPressed && (isTabNext(e) || isTabPrevious(e))) {
-			this._activeArrowButton = false;
-			this._textButtonActive = false;
+		if (isEscape(e) && !this._textButtonActive) {
+			this._resetActionButtonStates();
 		}
 
 		this._tabIndex = -1;
 	}
 
 	_onKeyUp(e: KeyboardEvent) {
-		this._isKeyDownOperation = false;
+		const target = e.target as Button;
 		if (this._isArrowKeyAction(e)) {
 			e.preventDefault();
 			this._activeArrowButton = false;
+			return;
+		}
+
+		if (isSpace(e)) {
+			e.preventDefault();
+			e.stopPropagation();
 			this._textButtonActive = false;
-		} else if (this._isDefaultAction(e)) {
-			this._isDefaultActionPressed = false;
-			this._textButtonActive = false;
-			if (isSpace(e)) {
-				e.preventDefault();
-				e.stopPropagation();
+			if (!this._shiftOrEscapePressedDuringSpace && target !== this.arrowButton) { // Do not fire click if Arrow button is focused by mouse and Space is pressed afterwards
 				this._fireClick();
-				this._spacePressed = false;
-				this._textButtonActive = false;
 			}
+
+			this._shiftOrEscapePressedDuringSpace = false;
+			return;
 		}
 
-		if (this._isShiftOrEscape(e)) {
-			this._handleShiftOrEscapePressed();
+		const shouldToggleTextButtonActiveStateOff = isEnter(e) || (isShift(e) && this._textButtonActive);
+
+		if (shouldToggleTextButtonActiveStateOff) {
+			this._textButtonActive = false;
 		}
+	}
 
-		this._tabIndex = -1;
+	_resetActionButtonStates() {
+		this._activeArrowButton = false;
+		this._textButtonActive = false;
+		this._shiftOrEscapePressedDuringSpace = false;
 	}
 
 	_fireClick(e?: Event) {
 		e?.stopPropagation();
-		if (!this._shiftOrEscapePressed) {
-			this.fireDecoratorEvent("click");
-		}
-		this._shiftOrEscapePressed = false;
+		this.fireDecoratorEvent("click");
 	}
 
 	_fireArrowClick(e?: Event) {
@@ -383,15 +371,6 @@ class SplitButton extends UI5Element {
 		return isSpace(e) || isEnter(e);
 	}
 
-	/**
-	 * Checks if the pressed key is an escape key or shift key.
-	 * @param e - keyboard event
-	 * @private
-	 */
-	_isShiftOrEscape(e: KeyboardEvent): boolean {
-		return isEscape(e) || isShift(e);
-	}
-
 	/**
 	 * Handles the click event and the focus on the arrow button.
 	 * @param e - keyboard event
@@ -401,10 +380,6 @@ class SplitButton extends UI5Element {
 		e.preventDefault();
 
 		this._fireArrowClick(e);
-
-		if (isSpace((e as KeyboardEvent))) {
-			this._spacePressed = true;
-		}
 	}
 
 	/**
@@ -414,30 +389,24 @@ class SplitButton extends UI5Element {
 	 */
 	_handleDefaultAction(e: KeyboardEvent) {
 		e.preventDefault();
-		const wasSpacePressed = isSpace(e);
 		const target = e.target as Button;
 
 		if (this.arrowButton && target === this.arrowButton) {
 			this._activeArrowButton = true;
 			this._fireArrowClick();
-			if (wasSpacePressed) {
-				this._spacePressed = true;
-				this._textButtonActive = false;
-			}
-		} else {
-			this._textButtonActive = true;
-			if (wasSpacePressed) {
-				this._spacePressed = true;
-				return;
-			}
-			this._fireClick();
+			return;
 		}
-	}
 
-	_handleShiftOrEscapePressed() {
-		this._shiftOrEscapePressed = true;
-		this._textButtonActive = false;
-		this._isKeyDownOperation = false;
+		this._textButtonActive = true;
+
+		if (isEnter(e)) {
+			this._fireClick(e);
+			return;
+		}
+
+		if (isTabPrevious(e) || isTabNext(e)) {
+			this._resetActionButtonStates();
+		}
 	}
 
 	get effectiveActiveArrowButton() {

packages/main/src/SplitButtonTemplate.tsx

@@ -10,7 +10,6 @@ export default function SplitButtonTemplate(this: SplitButton) {
 			tabindex={this._tabIndex}
 			aria-labelledby={`${this._id}-invisibleTextDefault ${this._id}}-invisibleText`}
 			onFocusOut={this._onFocusOut}
-			onFocusIn={this._onFocusIn}
 			onKeyDown={this._onKeyDown}
 			onKeyUp={this._onKeyUp}
 		>