From 9d87d9957ff18a0010a29e7e42d7c07e9c84c4d1 Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Sat, 19 Nov 2022 15:08:49 -0600
Subject: [PATCH] TranslateButton: stopPropagation()

---
 app/soapbox/components/translate-button.tsx | 17 +++++++++++------
 1 file changed, 11 insertions(+), 6 deletions(-)

diff --git a/app/soapbox/components/translate-button.tsx b/app/soapbox/components/translate-button.tsx
index 07c778fd2..7c40a4a14 100644
--- a/app/soapbox/components/translate-button.tsx
+++ b/app/soapbox/components/translate-button.tsx
@@ -4,6 +4,7 @@ import { FormattedMessage, useIntl } from 'react-intl';
 import { translateStatus, undoStatusTranslation } from 'soapbox/actions/statuses';
 import { useAppDispatch, useAppSelector, useFeatures } from 'soapbox/hooks';
 
+import StopPropagation from './stop-propagation';
 import { Stack } from './ui';
 
 import type { Status } from 'soapbox/types/entities';
@@ -42,17 +43,21 @@ const TranslateButton: React.FC<ITranslateButton> = ({ status }) => {
       <Stack className='text-gray-700 dark:text-gray-600 text-sm' alignItems='start'>
         <FormattedMessage id='status.translated_from_with' defaultMessage='Translated from {lang} using {provider}' values={{ lang: languageName, provider }} />
 
-        <button className='text-primary-600 dark:text-accent-blue hover:text-primary-700 dark:hover:text-accent-blue hover:underline' onClick={handleTranslate}>
-          <FormattedMessage id='status.show_original' defaultMessage='Show original' />
-        </button>
+        <StopPropagation>
+          <button className='text-primary-600 dark:text-accent-blue hover:text-primary-700 dark:hover:text-accent-blue hover:underline' onClick={handleTranslate}>
+            <FormattedMessage id='status.show_original' defaultMessage='Show original' />
+          </button>
+        </StopPropagation>
       </Stack>
     );
   }
 
   return (
-    <button className='text-primary-600 dark:text-accent-blue hover:text-primary-700 dark:hover:text-accent-blue text-left text-sm hover:underline' onClick={handleTranslate}>
-      <FormattedMessage id='status.translate' defaultMessage='Translate' />
-    </button>
+    <StopPropagation>
+      <button className='text-primary-600 dark:text-accent-blue hover:text-primary-700 dark:hover:text-accent-blue text-left text-sm hover:underline' onClick={handleTranslate}>
+        <FormattedMessage id='status.translate' defaultMessage='Translate' />
+      </button>
+    </StopPropagation>
   );
 };