refine clickToContext handling for notifications/flat comments

components/comment.js

@@ -18,7 +18,7 @@ function Parent ({ item, rootText }) {
     <>
       <span> \ </span>
       <Link href={`/items/${item.parentId}`} passHref>
-        <a onClick={e => e.stopPropagation()} className='text-reset'>parent</a>
+        <a className='text-reset'>parent</a>
       </Link>
     </>
   )
@@ -32,7 +32,7 @@ function Parent ({ item, rootText }) {
       {Number(item.root.id) !== Number(item.parentId) && <ParentFrag />}
       <span> \ </span>
       <Link href={`/items/${item.root.id}`} passHref>
-        <a onClick={e => e.stopPropagation()} className='text-reset'>{rootText || 'on:'} {item.root.title}</a>
+        <a className='text-reset'>{rootText || 'on:'} {item.root.title}</a>
       </Link>
     </>
   )
@@ -87,11 +87,11 @@ export default function Comment ({
                   <span> \ </span>
                 </>}
               <Link href={`/items/${item.id}`} passHref>
-                <a onClick={e => e.stopPropagation()} className='text-reset'>{item.ncomments} replies</a>
+                <a className='text-reset'>{item.ncomments} replies</a>
               </Link>
               <span> \ </span>
               <Link href={`/${item.user.name}`} passHref>
-                <a onClick={e => e.stopPropagation()}>@{item.user.name}<span className='text-boost font-weight-bold'>{op && ' OP'}</span></a>
+                <a>@{item.user.name}<span className='text-boost font-weight-bold'>{op && ' OP'}</span></a>
               </Link>
               <span> </span>
               <Link href={`/items/${item.id}`} passHref>
@@ -103,7 +103,9 @@ export default function Comment ({
                   <span> \ </span>
                   <div
                     className={styles.edit}
-                    onClick={() => setEdit(!edit)}
+                    onClick={e => {
+                      setEdit(!edit)
+                    }}
                   >
                     {edit ? 'cancel' : 'edit'}
                     <Countdown

components/comments-flat.js

@@ -3,6 +3,7 @@ import { MORE_FLAT_COMMENTS } from '../fragments/comments'
 import Comment, { CommentSkeleton } from './comment'
 import { useRouter } from 'next/router'
 import MoreFooter from './more-footer'
+import { ignoreClick } from '../lib/clicks'
 
 export default function CommentsFlat ({ variables, comments, cursor, ...props }) {
   const router = useRouter()
@@ -24,7 +25,10 @@ export default function CommentsFlat ({ variables, comments, cursor, ...props })
         <div
           key={item.id}
           className='clickToContext py-2'
-          onClick={() => {
+          onClick={e => {
+            if (ignoreClick(e)) {
+              return
+            }
             router.push({
               pathname: '/items/[id]',
               query: { id: item.root.id, commentId: item.id }

components/notifications.js

@@ -5,13 +5,18 @@ import { NOTIFICATIONS } from '../fragments/notifications'
 import { useRouter } from 'next/router'
 import MoreFooter from './more-footer'
 import Invite from './invite'
+import { ignoreClick } from '../lib/clicks'
 
 function Notification ({ n }) {
   const router = useRouter()
   return (
     <div
       className='clickToContext'
-      onClick={() => {
+      onClick={e => {
+        if (ignoreClick(e)) {
+          return
+        }
+
         if (n.__typename === 'Invitification') {
           router.push('/invites')
         } else if (!n.item.title) {

components/upvote.js

@@ -178,12 +178,10 @@ export default function UpVote ({ item, className }) {
   return (
     <LightningConsumer>
       {({ strike }) =>
-        <div ref={ref}>
+        <div ref={ref} className='upvoteParent'>
           <LongPressable
             onLongPress={
               async (e) => {
-                e.preventDefault()
-                e.stopPropagation()
                 if (!item || voteLock) return
 
                 // we can't tip ourselves
@@ -198,8 +196,6 @@ export default function UpVote ({ item, className }) {
             onShortPress={
             me
               ? async (e) => {
-                  e.preventDefault()
-                  e.stopPropagation()
                   if (!item || voteLock) return
 
                   // we can't tip ourselves
@@ -256,9 +252,6 @@ export default function UpVote ({ item, className }) {
                         filter: `drop-shadow(0 0 6px ${color}90)`
                       }
                     : undefined}
-                  onClick={e => {
-                    e.stopPropagation()
-                  }}
                 />
               </div>
             </ActionTooltip>

lib/clicks.js

@@ -0,0 +1,9 @@
+export function ignoreClick (e) {
+  return e.target.onclick || // the target has a click handler
+    // the target has an interactive parent
+    e.target.matches(':where(.upvoteParent, form, textarea, button, a, input) :scope') ||
+    // the target is an interactive element
+    ['TEXTAREA', 'BUTTON', 'A', 'INPUT', 'FORM'].includes(e.target.tagName.toUpperCase()) ||
+    // the target is an interactive element
+    e.target.class === 'upvoteParent'
+}