fix(vwc-button): multiple click events generated on button

components/button/src/vwc-button.ts

@@ -134,7 +134,7 @@ export class VWCButton extends MWCButton {
 		// return nothing
 	}
 
-	protected _handleClick(): void {
+	protected _handleClick(event: MouseEvent): void {
 		if (this.form) {
 			switch (this.getAttribute('type')) {
 			case 'reset':
@@ -143,7 +143,11 @@ export class VWCButton extends MWCButton {
 			case 'button':
 				break;
 			default:
-				this.#_hiddenButton.click();
+				if (event.target === this) {
+					this.#_hiddenButton.click();
+				} else {
+					event.stopImmediatePropagation();
+				}
 				break;
 			}
 		}

components/button/test/button.test.js

@@ -75,6 +75,36 @@ describe('button', () => {
 			expect(submitted).to.equal(true);
 		});
 
+		it('should emit a click event only once when inside a form', async function () {
+			let clicked = 0;
+			const addedElements = addElement(
+				textToDomToParent(
+					`<form onsubmit="return false" name="testForm" id="testForm"><${COMPONENT_NAME} type="submit">Button Text</${COMPONENT_NAME}></form>`
+				)
+			);
+			await waitNextTask();
+			const formElement = addedElements[0];
+			const actualElement = formElement.firstChild;
+			actualElement.addEventListener('click', () => (clicked++));
+
+			actualElement.click();
+			expect(clicked).to.equal(1);
+		});
+
+		it('should emit a click event only once when outside a form', async function () {
+			let clicked = 0;
+			const [actualElement] = addElement(
+				textToDomToParent(
+					`<${COMPONENT_NAME} type="submit">Button Text</${COMPONENT_NAME}>`
+				)
+			);
+			await waitNextTask();
+			actualElement.addEventListener('click', () => (clicked++));
+
+			actualElement.click();
+			expect(clicked).to.equal(1);
+		});
+
 		it('should reset form when of type reset', async function () {
 			let submitted = false;
 			let reset = false;