Merge pull request #172 from balena-io-modules/markdown-stopevent

Markdown: Stop propagation for links

Author: myarmolinsky

src/components/Markdown/index.tsx

@@ -94,6 +94,9 @@ const defaultMarkdownComponentOverrides: ReactMarkdownOptions['components'] = {
 		<MUILinkWithTracking
 			target="_blank"
 			rel="noreferrer"
+			onClick={(e) => {
+				e.stopPropagation();
+			}}
 			{...(props as MUILinkWithTrackingProps)}
 		/>
 	),

src/components/RJST/components/Filters/Views.tsx

@@ -15,7 +15,7 @@ import {
 import { color } from '@balena/design-tokens';
 import type { DropDownButtonProps } from '../../../DropDownButton';
 import { DropDownButton } from '../../../DropDownButton';
-import { stopEvent } from '../../utils';
+import { stopEvent } from '../../../../utils/eventHandling';
 import { Tooltip } from '../../../Tooltip';
 
 interface FiltersView {

src/components/RJST/utils.ts

@@ -21,11 +21,6 @@ export const diff = <T>(a: T, b: T) => {
 	return a > b ? 1 : -1;
 };
 
-export const stopEvent = (event: React.MouseEvent<HTMLElement>) => {
-	event.preventDefault();
-	event.stopPropagation();
-};
-
 export const getFromLocalStorage = <T>(key: string): T | undefined => {
 	try {
 		const val = localStorage.getItem(key);

src/components/TagManagementDialog/AddTagForm.tsx

@@ -9,7 +9,10 @@ import { Callout } from '../Callout';
 import { designTokens } from '../..';
 import type { TFunction } from '../../hooks/useTranslations';
 import { useTranslation } from '../../hooks/useTranslations';
-import { stopKeyDownEvent, withPreventDefault } from './utils';
+import {
+	stopKeyDownEvent,
+	withPreventDefault,
+} from '../../utils/eventHandling';
 import {
 	type SimpleConfirmationDialogProps,
 	SimpleConfirmationDialog,

src/components/TagManagementDialog/TagLabel.tsx

@@ -7,7 +7,7 @@ import type { TypographyProps } from '@mui/material';
 import { ClickAwayListener, styled, Tooltip, Typography } from '@mui/material';
 import { useTranslation } from '../../hooks/useTranslations';
 import { copyToClipboard } from '../Copy';
-import { stopEvent } from './utils';
+import { stopEvent } from '../../utils/eventHandling';
 
 const Label = styled(Typography)(({ theme }) => ({
 	display: 'inline-flex',

src/components/TagManagementDialog/index.tsx

@@ -35,7 +35,10 @@ import {
 import { useTranslation } from '../../hooks/useTranslations';
 import { CollectionSummary } from '../CollectionSummary';
 import { DialogWithCloseButton } from '../DialogWithCloseButton';
-import { stopKeyDownEvent, withPreventDefault } from './utils';
+import {
+	stopKeyDownEvent,
+	withPreventDefault,
+} from '../../utils/eventHandling';
 
 const NBSP = '\u00a0';