fix(button): Prevent duplicate click events across frameworks while preserving native behaviour (#4359)

* fix(button): prevent duplicate click events by stopping propagation

* fix(button): prevent duplicate click events by stopping propagation

* fix(button): prevent duplicate click events across frameworks while preserving native behavior

* chore: update onClick for button and link with mitosis plugin (#4392)

---------

Co-authored-by: Maximilian Franzke <[email protected]>
Co-authored-by: Nicolas Merget <[email protected]>

Author: 3 people

__snapshots__/button/patternhub/button-properties-should-match-screenshot.png

@@ -1,7 +1,12 @@
+const onClickPlugin = require('../plugins/on-click.cjs');
+
+/**
+ * @type {import('@builder.io/mitosis').ToAngularOptions}
+ */
 module.exports = {
-	typescript: true,
 	attributePassing: {
 		customRef: '_ref'
 	},
-	api: 'signals'
+	api: 'signals',
+	plugins: [onClickPlugin]
 };

__snapshots__/link/patternhub/link-properties-should-match-screenshot.png

@@ -10,6 +10,9 @@ module.exports = {
 	files: 'src/**',
 	targets: ['angular', 'vue', 'react', 'stencil'],
 	dest: '../../output',
+	commonOptions: {
+		typescript: true
+	},
 	options: {
 		react,
 		angular,

packages/components/configs/angular/index.cjs

@@ -0,0 +1,31 @@
+/**
+ * @type {import('@builder.io/mitosis').MitosisPlugin}
+ */
+module.exports = () => ({
+	json: {
+		pre: (json) => {
+			if (['DBButton', 'DBLink'].includes(json.name)) {
+				if (json.pluginData.target === 'vue') {
+					json.children[0].bindings.onClick = {
+						code: 'state.handleClick(event)',
+						bindingType: 'expression',
+						type: 'single'
+					};
+
+					json.state = {
+						...json.state,
+						handleClick: {
+							code: `function handleClick(event){if (props.onClick){props.onClick(event);}}`,
+							type: 'method'
+						}
+					};
+				} else {
+					delete json.props.onClick;
+					delete json.props.click;
+				}
+			}
+
+			return json;
+		}
+	}
+});

packages/components/configs/mitosis.config.cjs

@@ -1,6 +1,8 @@
+const onClickPlugin = require('../plugins/on-click.cjs');
+
 /**
  * @type {import('@builder.io/mitosis').ToReactOptions}
  */
 module.exports = {
-	typescript: true
+	plugins: [onClickPlugin]
 };

packages/components/configs/plugins/on-click.cjs

@@ -1,7 +1,12 @@
+const onClickPlugin = require('../plugins/on-click.cjs');
+
+/**
+ * @type {import('@builder.io/mitosis').ToStencilOptions}
+ */
 module.exports = {
-	typescript: true,
 	attributePassing: {
 		enabled: true,
 		customRef: '_ref'
-	}
+	},
+	plugins: [onClickPlugin]
 };

packages/components/configs/react/index.cjs

@@ -1,7 +1,9 @@
+const onClickPlugin = require('../plugins/on-click.cjs');
+
 /**
  * @type {import('@builder.io/mitosis').ToVueOptions}
  */
 module.exports = {
-	typescript: true,
-	api: 'composition'
+	api: 'composition',
+	plugins: [onClickPlugin]
 };

packages/components/configs/stencil/index.cjs

@@ -2,12 +2,10 @@ import {
 	Show,
 	useDefaultProps,
 	useMetadata,
-	useRef,
-	useStore
+	useRef
 } from '@builder.io/mitosis';
-import type { DBButtonProps, DBButtonState } from './model';
+import type { DBButtonProps } from './model';
 import { cls, getBoolean, getBooleanAsString, getHideProp } from '../../utils';
-import { ClickEvent } from '../../shared/model';
 
 useMetadata({
 	angular: {
@@ -19,16 +17,6 @@ useDefaultProps<DBButtonProps>({});
 
 export default function DBButton(props: DBButtonProps) {
 	const _ref = useRef<HTMLButtonElement | any>(null);
-	// jscpd:ignore-start
-	const state = useStore<DBButtonState>({
-		handleClick: (event: ClickEvent<HTMLButtonElement>) => {
-			if (props.onClick) {
-				props.onClick(event);
-			}
-		}
-	});
-
-	// jscpd:ignore-end
 
 	return (
 		<button
@@ -50,10 +38,7 @@ export default function DBButton(props: DBButtonProps) {
 			value={props.value}
 			aria-describedby={props.describedbyid}
 			aria-expanded={props.ariaexpanded}
-			aria-pressed={props.ariapressed}
-			onClick={(event: ClickEvent<HTMLButtonElement>) =>
-				state.handleClick(event)
-			}>
+			aria-pressed={props.ariapressed}>
 			<Show when={props.text} else={props.children}>
 				{props.text}
 			</Show>

packages/components/configs/vue/index.cjs

@@ -2,29 +2,17 @@ import {
 	Show,
 	useDefaultProps,
 	useMetadata,
-	useRef,
-	useStore
+	useRef
 } from '@builder.io/mitosis';
-import { DBLinkProps, DBLinkState } from './model';
+import { DBLinkProps } from './model';
 import { cls, getBooleanAsString, getHideProp } from '../../utils';
-import { ClickEvent } from '../../shared/model';
 
 useMetadata({});
 
 useDefaultProps<DBLinkProps>({});
 
 export default function DBLink(props: DBLinkProps) {
 	const _ref = useRef<HTMLAnchorElement | any>(null);
-	// jscpd:ignore-start
-	const state = useStore<DBLinkState>({
-		handleClick: (event: ClickEvent<HTMLAnchorElement>) => {
-			if (props.onClick) {
-				props.onClick(event);
-			}
-		}
-	});
-
-	// jscpd:ignore-end
 
 	return (
 		<a
@@ -44,10 +32,7 @@ export default function DBLink(props: DBLinkProps) {
 			data-size={props.size}
 			data-hide-icon-after={getHideProp(props.showIcon ?? true)}
 			data-variant={props.variant}
-			data-content={props.content || 'internal'}
-			onClick={(event: ClickEvent<HTMLAnchorElement>) =>
-				state.handleClick(event)
-			}>
+			data-content={props.content || 'internal'}>
 			<Show when={props.text} else={props.children}>
 				{props.text}
 			</Show>