fix(ui5-button): removes active state after tabbing on an pressed button (#335)

- The activate state of the buttons used to be displayed and controlled by the :active CSS selector. Seems like :active has some issues on different browsers and it is not consistently implemented. Therefore, the active state is now controlled by a javascript implementation.
- chromium issue: https://bugs.chromium.org/p/chromium/issues/detail?id=945854

fixes: #156

Author: MapTo0

packages/main/src/Button.js

@@ -160,6 +160,16 @@ class Button extends WebComponent {
 		return ButtonTemplateContext.calculate;
 	}
 
+	constructor() {
+		super();
+
+		this._deactivate = () => {
+			if (this._active) {
+				this._active = false;
+			}
+		};
+	}
+
 	onBeforeRendering() {
 		if (this.icon) {
 			this._iconSettings = {
@@ -170,6 +180,14 @@ class Button extends WebComponent {
 		}
 	}
 
+	onEnterDOM() {
+		document.addEventListener("mouseup", this._deactivate);
+	}
+
+	onExitDOM() {
+		document.removeEventListener("mouseup", this._deactivate);
+	}
+
 	onclick(event) {
 		event.isMarked = "button";
 		if (!this.disabled) {
@@ -179,16 +197,14 @@ class Button extends WebComponent {
 
 	onmousedown(event) {
 		event.isMarked = "button";
-		if (this.activeIcon) {
+
+		if (!this.disabled) {
 			this._active = true;
 		}
 	}
 
 	onmouseup(event) {
 		event.isMarked = "button";
-		if (this.activeIcon) {
-			this._active = false;
-		}
 	}
 
 	onkeydown(event) {

packages/main/src/ToggleButton.js

@@ -81,16 +81,6 @@ class ToggleButton extends Button {
 		}
 	}
 
-	/*
-	* @override
-	*/
-	onkeydown() {}
-
-	/*
-	* @override
-	*/
-	onkeyup() {}
-
 	static get calculateTemplateContext() {
 		return ToggleButtonTemplateContext.calculate;
 	}

packages/main/src/ToggleButtonTemplateContext.js

@@ -5,7 +5,6 @@ class ToggleButtonTemplateContext {
 		const calculatedState = ButtonTemplateContext.calculate(state);
 
 		calculatedState.classes.main.sapMToggleBtnPressed = state.pressed;
-		calculatedState.classes.main.sapMBtnActive = false;
 		calculatedState.pressed = state.pressed ? "true" : undefined;
 
 		return calculatedState;

packages/main/src/themes-next/Button.css

@@ -64,7 +64,7 @@ ui5-button span[data-sap-ui-wc-root] .sapMBtn::before {
 	position: relative;
 }
 
-.sapMBtn:hover {
+.sapMBtn:not(.sapMBtnActive):hover {
 	background: var(--sapUiButtonHoverBackground);
 }
 
@@ -114,17 +114,15 @@ ui5-button span[data-sap-ui-wc-root] .sapMBtn::before {
 	border: 0;
 }
 
-.sapMBtnActive,
-.sapMBtn:active {
+.sapMBtnActive {
 	background-image: none;
 	background-color: var(--sapUiButtonActiveBackground);
 	border-color: var(--_ui5_button_active_border_color);
 	color: var(--sapUiButtonActiveTextColor);
 	text-shadow: none;
 }
 
-.sapMBtnActive:focus::after,
-.sapMBtn:active:focus::after {
+.sapMBtnActive:focus::after {
 	border-color: var(--sapUiContentContrastFocusColor);
 }
 
@@ -140,8 +138,7 @@ ui5-button span[data-sap-ui-wc-root] .sapMBtn::before {
 	border-color: var(--_ui5_button_positive_border_hover_color);
 }
 
-.sapMBtn.sapMBtnPositive.sapMBtnActive,
-.sapMBtn.sapMBtnPositive:active {
+.sapMBtn.sapMBtnPositive.sapMBtnActive {
 	background-color: var(--sapUiButtonAcceptActiveBackground);
 	border-color: var(--_ui5_button_positive_border_active_color);
 	color: var(--sapUiButtonActiveTextColor);
@@ -151,8 +148,7 @@ ui5-button span[data-sap-ui-wc-root] .sapMBtn::before {
 .sapMBtn.sapMBtnPositive:focus {
 	border-color: var(--_ui5_button_positive_focus_border_color);
 }
-.sapMBtn.sapMBtnPositive.sapMBtnActive:focus::after,
-.sapMBtn.sapMBtnPositive:active:focus::after {
+.sapMBtn.sapMBtnPositive.sapMBtnActive:focus::after {
 	border-color: var(--sapUiContentContrastFocusColor);
 }
 
@@ -176,16 +172,14 @@ ui5-button span[data-sap-ui-wc-root] .sapMBtn::before {
 	border-color: var(--_ui5_button_negative_focus_border_color);
 }
 
-.sapMBtn.sapMBtnNegative.sapMBtnActive,
-.sapMBtn.sapMBtnNegative:active {
+.sapMBtn.sapMBtnNegative.sapMBtnActive {
 	background-color: var(--sapUiButtonRejectActiveBackground);
 	border-color: var(--_ui5_button_negative_active_border_color);
 	color: var(--sapUiButtonActiveTextColor);
 	text-shadow: none;
 }
 
-.sapMBtn.sapMBtnNegative.sapMBtnActive:focus::after,
-.sapMBtn.sapMBtnNegative:active:focus::after {
+.sapMBtn.sapMBtnNegative.sapMBtnActive:focus::after {
 	border-color: var(--sapUiContentContrastFocusColor);
 }
 
@@ -205,16 +199,14 @@ ui5-button span[data-sap-ui-wc-root] .sapMBtn::before {
 	border-color: var(--sapUiButtonEmphasizedHoverBorderColor);
 }
 
-.sapMBtn.sapMBtnEmphasized.sapMBtnActive,
-.sapMBtn.sapMBtnEmphasized:active {
+.sapMBtn.sapMBtnEmphasized.sapMBtnActive {
 	background-color: var(--sapUiButtonEmphasizedActiveBackground);
 	border-color: var(--sapUiButtonEmphasizedActiveBorderColor);
 	color: var(--sapUiButtonActiveTextColor);
 	text-shadow: none;
 }
 
-.sapMBtn.sapMBtnEmphasized.sapMBtnActive:focus::after,
-.sapMBtn.sapMBtnEmphasized:active:focus::after {
+.sapMBtn.sapMBtnEmphasized.sapMBtnActive:focus::after {
 	border-color: var(--sapUiContentContrastFocusColor);
 }
 
@@ -238,13 +230,12 @@ ui5-button span[data-sap-ui-wc-root] .sapMBtn::before {
 	background-color: var(--sapUiButtonLiteHoverBackground);
 }
 
-.sapMBtn.sapMBtnTransparent.sapMBtnActive,
-.sapMBtn.sapMBtnTransparent:active {
+.sapMBtn.sapMBtnTransparent.sapMBtnActive {
 	background-color: var(--sapUiButtonLiteActiveBackground);
 	color: var(--sapUiButtonActiveTextColor);
 	text-shadow: none;
 }
 
-.sapMBtn.sapMBtnTransparent:hover:not(:active) {
+.sapMBtn.sapMBtnTransparent:hover:not(.sapMBtnActive) {
 	border-color: transparent;
 }