Stop propagation of share button

packages/web/src/components/alt-button/ShareButton.tsx

@@ -46,8 +46,8 @@ const ShareButton = ({
       })}
       aria-label={messages.share}
       onClick={(e) => {
-        onClick(e)
         stopPropagation && e.stopPropagation()
+        onClick(e)
       }}
     >
       <div

packages/web/src/components/track/desktop/CollectionTile.tsx

@@ -349,9 +349,13 @@ export const CollectionTile = ({
     isFeed
   ])
 
-  const onClickShare = useCallback(() => {
-    shareCollection(id)
-  }, [shareCollection, id])
+  const onClickShare = useCallback(
+    (e?: MouseEvent) => {
+      e?.stopPropagation()
+      shareCollection(id)
+    },
+    [shareCollection, id]
+  )
 
   const hasStreamAccess = !!access?.stream
 

packages/web/src/components/track/desktop/TrackTile.tsx

@@ -205,9 +205,13 @@ export const TrackTile = ({
     }
   }, [handleRepostTrack, handleUndoRepostTrack, trackId, isReposted, isFeed])
 
-  const onClickShare = useCallback(() => {
-    shareTrack(trackId)
-  }, [shareTrack, trackId])
+  const onClickShare = useCallback(
+    (e?: MouseEvent) => {
+      e?.stopPropagation()
+      shareTrack(trackId)
+    },
+    [shareTrack, trackId]
+  )
 
   const onClickTitle = useCallback(
     (e: MouseEvent) => {

packages/web/src/components/track/mobile/BottomButtons.tsx

@@ -25,7 +25,7 @@ type BottomButtonsProps = {
   toggleSave: () => void
   toggleRepost: () => void
   onClickOverflow: () => void
-  onShare: () => void
+  onShare: (e?: MouseEvent) => void
   onClickGatedUnlockPill?: (e: MouseEvent) => void
   isLoading: boolean
   isOwner: boolean

packages/web/src/components/track/mobile/CollectionTile.tsx

@@ -374,9 +374,13 @@ export const CollectionTile = ({
     [goToRoute, getRoute]
   )
 
-  const onShare = useCallback(() => {
-    shareCollection(collection.playlist_id)
-  }, [shareCollection, collection.playlist_id])
+  const onShare = useCallback(
+    (e?: MouseEvent) => {
+      e?.stopPropagation()
+      shareCollection(collection.playlist_id)
+    },
+    [shareCollection, collection.playlist_id]
+  )
 
   const onClickOverflow = useCallback(() => {
     const overflowActions = [

packages/web/src/components/track/mobile/TrackTile.tsx

@@ -1,4 +1,4 @@
-import { useCallback, useEffect } from 'react'
+import { MouseEvent, useCallback, useEffect } from 'react'
 
 import {
   useToggleFavoriteTrack,
@@ -298,16 +298,20 @@ export const TrackTile = ({
 
   const onToggleRepost = useCallback(() => toggleRepost(id), [toggleRepost, id])
 
-  const onClickShare = useCallback(() => {
-    if (!trackId) return
-    dispatch(
-      requestOpenShareModal({
-        type: 'track',
-        trackId,
-        source: ShareSource.TILE
-      })
-    )
-  }, [dispatch, trackId])
+  const onClickShare = useCallback(
+    (e?: MouseEvent) => {
+      e?.stopPropagation()
+      if (!trackId) return
+      dispatch(
+        requestOpenShareModal({
+          type: 'track',
+          trackId,
+          source: ShareSource.TILE
+        })
+      )
+    },
+    [dispatch, trackId]
+  )
 
   const onClickOverflowMenu = useCallback(
     () => onClickOverflow && onClickOverflow(id),