@kiva/kv-components 3.0.0 → 3.0.1

package/CHANGELOG.md

@@ -3,6 +3,17 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [3.0.1](https://github.com/kiva/kv-ui-elements/compare/@kiva/kv-components@3.0.0...@kiva/kv-components@3.0.1) (2022-02-16)
+
+
+### Bug Fixes
+
+* **KvButton:** pass through click event for parent ([65c042f](https://github.com/kiva/kv-ui-elements/commit/65c042ff7b4780a514766ab476f443562b195eab))
+
+
+
+
+
 # [3.0.0](https://github.com/kiva/kv-ui-elements/compare/@kiva/kv-components@2.0.0...@kiva/kv-components@3.0.0) (2022-02-16)
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kiva/kv-components",
-  "version": "3.0.0",
+  "version": "3.0.1",
   "type": "module",
   "publishConfig": {
     "access": "public"
@@ -68,5 +68,5 @@
       "optional": true
     }
   },
-  "gitHead": "7006bb2c0026a64f278e727ebae46569e1426c68"
+  "gitHead": "2a8ff1a1fb9a3ad59f371d1e938a858e52372c62"
 }

package/tests/unit/specs/components/KvButton.spec.js

@@ -1,4 +1,5 @@
 import { render, fireEvent } from '@testing-library/vue';
+import userEvent from '@testing-library/user-event';
 import { axe } from 'jest-axe';
 import addVueRouter from '../../utils/addVueRouter';
 import KvButton from '../../../../vue/KvButton.vue';
@@ -52,6 +53,29 @@ describe('Default Button', () => {
 		getByTestId('ripple');
 	});
 
+	it('passes through click events', async () => {
+		const onClick = jest.fn();
+		const { getByText } = render({
+			template: `<div>
+				<KvButton @click.prevent="onClick">Button tag</KvButton>
+				<KvButton href="#test" @click.prevent="onClick">Anchor tag</KvButton>
+				<KvButton to="/test" @click.native.prevent="onClick">Router-link</KvButton>
+			</div>`,
+			components: {
+				KvButton,
+			},
+			methods: {
+				onClick,
+			},
+		}, addVueRouter());
+
+		// Click all the buttons and expect the onClick method to have been called 3 times
+		await userEvent.click(getByText('Button tag'));
+		await userEvent.click(getByText('Anchor tag'));
+		await userEvent.click(getByText('Router-link'));
+		expect(onClick.mock.calls.length).toBe(3);
+	});
+
 	it('when passed a loading prop, the button is disabled', () => {
 		const { getByRole } = renderTestButton({
 			props: { state: 'loading' },

package/vue/KvButton.vue

@@ -242,13 +242,8 @@ export default {
 		};
 
 		const onClick = (event) => {
-			// emit a vue event and prevent native event
-			// so we don't have to write @click.native in our templates
-			if (tag.value === 'button' && type.value !== 'submit') {
-				event.preventDefault();
-				emit('click', event);
-			}
-
+			// Pass-through native click event to parent while adding ripple effect
+			emit('click', event);
 			createRipple(event);
 		};