fix(ui5-button, ui5-toggle-button): fire event with correct type

packages/main/src/Button.ts

@@ -360,6 +360,8 @@ class Button extends UI5Element implements IButton {
 	badge!: Array<ButtonBadge>;
 
 	_deactivate: () => void;
+	_onclickBound: (e: MouseEvent) => void;
+	_clickHandlerAttached = false;
 
 	@i18n("@ui5/webcomponents")
 	static i18nBundle: I18nBundle;
@@ -372,6 +374,19 @@ class Button extends UI5Element implements IButton {
 			}
 		};
 
+		this._onclickBound = e => {
+			if (e instanceof CustomEvent) {
+				return;
+			}
+
+			this._onclick(e);
+		};
+
+		if (!this._clickHandlerAttached) {
+			this.addEventListener("click", this._onclickBound);
+			this._clickHandlerAttached = true;
+		}
+
 		if (!isGlobalHandlerAttached) {
 			document.addEventListener("mouseup", this._deactivate);
 
@@ -391,6 +406,18 @@ class Button extends UI5Element implements IButton {
 		if (isDesktop()) {
 			this.setAttribute("desktop", "");
 		}
+
+		if (!this._clickHandlerAttached) {
+			this.addEventListener("click", this._onclickBound);
+			this._clickHandlerAttached = true;
+		}
+	}
+
+	onExitDOM() {
+		if (this._clickHandlerAttached) {
+			this.removeEventListener("click", this._onclickBound);
+			this._clickHandlerAttached = false;
+		}
 	}
 
 	async onBeforeRendering() {

packages/main/src/ToggleButton.ts

@@ -44,8 +44,36 @@ class ToggleButton extends Button {
 	@property({ type: Boolean })
 	pressed = false;
 
-	_onclick() {
-		this.pressed = !this.pressed;
+	_onclick(e: MouseEvent) {
+		e.stopImmediatePropagation();
+
+		if (this.nonInteractive) {
+			return;
+		}
+
+		const {
+			altKey,
+			ctrlKey,
+			metaKey,
+			shiftKey,
+		} = e;
+
+		const oldValue = this.pressed;
+		this.pressed = !oldValue;
+
+		const prevented = !this.fireDecoratorEvent("click", {
+			originalEvent: e,
+			altKey,
+			ctrlKey,
+			metaKey,
+			shiftKey,
+		});
+
+		if (prevented) {
+			// value should be restored if click is prevented
+			this.pressed = oldValue;
+			return;
+		}
 
 		if (isSafari()) {
 			this.getDomRef()!.focus();

packages/main/test/pages/Button.html

@@ -327,7 +327,7 @@
 		var clickCount = 0;
 
 		[button, disabledButton, disabledButtonIconOnly, disabledButtonWithoutIcon].forEach(function (el) {
-			el.addEventListener("click", function(event) {
+			el.addEventListener("ui5-click", function(event) {
 				clickCount += 1;
 				clickCounter.value = clickCount;
 			});
@@ -337,7 +337,7 @@
 			expanded: "true"
 		};
 
-		button.addEventListener("click", function(event) {
+		button.addEventListener("ui5-click", function(event) {
 			button.accessibilityAttributes = {
 				expanded: button.accessibilityAttributes.expanded === "true" ? "false" : "true"
 			};
@@ -352,11 +352,11 @@
 			controls: dialog.id,
 		}
 
-		dialogOpener.addEventListener("click", function() {
+		dialogOpener.addEventListener("ui5-click", function() {
 			dialog.open = true;
 		});
 
-		dialogCloser.addEventListener("click", function() {
+		dialogCloser.addEventListener("ui5-click", function() {
 			dialog.open = false;
 		});
 
@@ -365,19 +365,19 @@
 			menu.open = true;
 		}
 
-		menuButtonText.addEventListener("click", function(event) {
+		menuButtonText.addEventListener("ui5-click", function(event) {
 			showMenu(event.target);
 		});
 
-		menuButtonIcon.addEventListener("click", function(event) {
+		menuButtonIcon.addEventListener("ui5-click", function(event) {
 			showMenu(event.target);
 		});
 
-		menuButtonTextIcon.addEventListener("click", function(event) {
+		menuButtonTextIcon.addEventListener("ui5-click", function(event) {
 			showMenu(event.target);
 		});
 
-		menuButtonIconEnd.addEventListener("click", function(event) {
+		menuButtonIconEnd.addEventListener("ui5-click", function(event) {
 			showMenu(event.target);
 		});
 	</script>

packages/main/test/pages/ToggleButton.html

@@ -59,7 +59,7 @@ <h2>Result</h2>
 	var clickResult = document.getElementById("click-result");
 
 	Array.prototype.slice.call(document.querySelectorAll(".toggleButton")).forEach(function (el) {
-		el.addEventListener("click", function (event) {
+		el.addEventListener("ui5-click", function (event) {
 			clickResult.innerHTML = event.target.textContent + ": " + (event.target.pressed);
 		});
 	});