Merge branch 'mouseup' into 'develop'

Stop mouseUp propagation in statuses

See merge request soapbox-pub/soapbox!1920

app/soapbox/components/account.tsx

@@ -9,6 +9,7 @@ import { getAcct } from 'soapbox/utils/accounts';
 import { displayFqn } from 'soapbox/utils/state';
 
 import RelativeTimestamp from './relative-timestamp';
+import StopPropagation from './stop-propagation';
 import { Avatar, Emoji, HStack, Icon, IconButton, Stack, Text } from './ui';
 
 import type { Account as AccountEntity } from 'soapbox/types/entities';
@@ -21,8 +22,6 @@ const InstanceFavicon: React.FC<IInstanceFavicon> = ({ account }) => {
   const history = useHistory();
 
   const handleClick: React.MouseEventHandler = (e) => {
-    e.stopPropagation();
-
     const timelineUrl = `/timeline/${account.domain}`;
     if (!(e.ctrlKey || e.metaKey)) {
       history.push(timelineUrl);
@@ -167,6 +166,7 @@ const Account = ({
   const LinkEl: any = withLinkToProfile ? Link : 'div';
 
   return (
+    <StopPropagation>
       <div data-testid='account' className='flex-shrink-0 group block w-full' ref={overflowRef}>
         <HStack alignItems={actionAlignment} justifyContent='between'>
           <HStack alignItems={withAccountNote ? 'top' : 'center'} space={3}>
@@ -174,11 +174,7 @@ const Account = ({
               condition={showProfileHoverCard}
               wrapper={(children) => <HoverRefWrapper className='relative' accountId={account.id} inline>{children}</HoverRefWrapper>}
             >
-            <LinkEl
-              to={`/@${account.acct}`}
-              title={account.acct}
-              onClick={(event: React.MouseEvent) => event.stopPropagation()}
-            >
+              <LinkEl to={`/@${account.acct}`} title={account.acct}>
                 <Avatar src={account.avatar} size={avatarSize} />
                 {emoji && (
                   <Emoji
@@ -194,11 +190,7 @@ const Account = ({
                 condition={showProfileHoverCard}
                 wrapper={(children) => <HoverRefWrapper accountId={account.id} inline>{children}</HoverRefWrapper>}
               >
-              <LinkEl
-                to={`/@${account.acct}`}
-                title={account.acct}
-                onClick={(event: React.MouseEvent) => event.stopPropagation()}
-              >
+                <LinkEl to={`/@${account.acct}`} title={account.acct}>
                   <div className='flex items-center space-x-1 flex-grow' style={style}>
                     <Text
                       size='sm'
@@ -225,7 +217,7 @@ const Account = ({
                       <Text tag='span' theme='muted' size='sm'>&middot;</Text>
 
                       {timestampUrl ? (
-                      <Link to={timestampUrl} className='hover:underline' onClick={(event) => event.stopPropagation()}>
+                        <Link to={timestampUrl} className='hover:underline'>
                           <RelativeTimestamp timestamp={timestamp} theme='muted' size='sm' className='whitespace-nowrap' futureDate={futureTimestamp} />
                         </Link>
                       ) : (
@@ -267,6 +259,7 @@ const Account = ({
           </div>
         </HStack>
       </div>
+    </StopPropagation>
   );
 };
 

app/soapbox/components/polls/poll.tsx

@@ -5,6 +5,7 @@ import { openModal } from 'soapbox/actions/modals';
 import { vote } from 'soapbox/actions/polls';
 import { useAppDispatch, useAppSelector } from 'soapbox/hooks';
 
+import StopPropagation from '../stop-propagation';
 import { Stack, Text } from '../ui';
 
 import PollFooter from './poll-footer';
@@ -64,8 +65,7 @@ const Poll: React.FC<IPoll> = ({ id, status }): JSX.Element | null => {
   const showResults = poll.voted || poll.expired;
 
   return (
-    // eslint-disable-next-line jsx-a11y/no-static-element-interactions
-    <div onClick={e => e.stopPropagation()}>
+    <StopPropagation>
       {!showResults && poll.multiple && (
         <Text theme='muted' size='sm'>
           {intl.formatMessage(messages.multiple)}
@@ -93,7 +93,7 @@ const Poll: React.FC<IPoll> = ({ id, status }): JSX.Element | null => {
           selected={selected}
         />
       </Stack>
-    </div>
+    </StopPropagation>
   );
 };
 

app/soapbox/components/quoted-status.tsx

@@ -13,6 +13,7 @@ import OutlineBox from './outline-box';
 import StatusContent from './status-content';
 import StatusReplyMentions from './status-reply-mentions';
 import SensitiveContentOverlay from './statuses/sensitive-content-overlay';
+import StopPropagation from './stop-propagation';
 
 import type { Account as AccountEntity, Status as StatusEntity } from 'soapbox/types/entities';
 
@@ -91,6 +92,7 @@ const QuotedStatus: React.FC<IQuotedStatus> = ({ status, onCancel, compose }) =>
   }
 
   return (
+    <StopPropagation>
       <OutlineBox
         data-testid='quoted-status'
         className={classNames('cursor-pointer', {
@@ -143,6 +145,7 @@ const QuotedStatus: React.FC<IQuotedStatus> = ({ status, onCancel, compose }) =>
           </Stack>
         </Stack>
       </OutlineBox>
+    </StopPropagation>
   );
 };
 

app/soapbox/components/status-action-bar.tsx

@@ -1,4 +1,3 @@
-import classNames from 'clsx';
 import { List as ImmutableList } from 'immutable';
 import React from 'react';
 import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
@@ -16,6 +15,7 @@ import { initReport } from 'soapbox/actions/reports';
 import { deleteStatus, editStatus, toggleMuteStatus } from 'soapbox/actions/statuses';
 import EmojiButtonWrapper from 'soapbox/components/emoji-button-wrapper';
 import StatusActionButton from 'soapbox/components/status-action-button';
+import { HStack } from 'soapbox/components/ui';
 import DropdownMenuContainer from 'soapbox/containers/dropdown-menu-container';
 import { useAppDispatch, useAppSelector, useFeatures, useOwnAccount, useSettings, useSoapboxConfig } from 'soapbox/hooks';
 import { isLocal } from 'soapbox/utils/accounts';
@@ -127,8 +127,6 @@ const StatusActionBar: React.FC<IStatusActionBar> = ({
     } else {
       onOpenUnauthorizedModal('REPLY');
     }
-
-    e.stopPropagation();
   };
 
   const handleShareClick = () => {
@@ -146,18 +144,13 @@ const StatusActionBar: React.FC<IStatusActionBar> = ({
     } else {
       onOpenUnauthorizedModal('FAVOURITE');
     }
-
-    e.stopPropagation();
   };
 
   const handleBookmarkClick: React.EventHandler<React.MouseEvent> = (e) => {
-    e.stopPropagation();
     dispatch(toggleBookmark(status));
   };
 
   const handleReblogClick: React.EventHandler<React.MouseEvent> = e => {
-    e.stopPropagation();
-
     if (me) {
       const modalReblog = () => dispatch(toggleReblog(status));
       const boostModal = settings.get('boostModal');
@@ -172,8 +165,6 @@ const StatusActionBar: React.FC<IStatusActionBar> = ({
   };
 
   const handleQuoteClick: React.EventHandler<React.MouseEvent> = (e) => {
-    e.stopPropagation();
-
     if (me) {
       dispatch(quoteCompose(status));
     } else {
@@ -199,12 +190,10 @@ const StatusActionBar: React.FC<IStatusActionBar> = ({
   };
 
   const handleDeleteClick: React.EventHandler<React.MouseEvent> = (e) => {
-    e.stopPropagation();
     doDeleteStatus();
   };
 
   const handleRedraftClick: React.EventHandler<React.MouseEvent> = (e) => {
-    e.stopPropagation();
     doDeleteStatus(true);
   };
 
@@ -213,35 +202,29 @@ const StatusActionBar: React.FC<IStatusActionBar> = ({
   };
 
   const handlePinClick: React.EventHandler<React.MouseEvent> = (e) => {
-    e.stopPropagation();
     dispatch(togglePin(status));
   };
 
   const handleMentionClick: React.EventHandler<React.MouseEvent> = (e) => {
-    e.stopPropagation();
     dispatch(mentionCompose(status.account as Account));
   };
 
   const handleDirectClick: React.EventHandler<React.MouseEvent> = (e) => {
-    e.stopPropagation();
     dispatch(directCompose(status.account as Account));
   };
 
   const handleChatClick: React.EventHandler<React.MouseEvent> = (e) => {
-    e.stopPropagation();
     const account = status.account as Account;
     dispatch(launchChat(account.id, history));
   };
 
   const handleMuteClick: React.EventHandler<React.MouseEvent> = (e) => {
-    e.stopPropagation();
     dispatch(initMuteModal(status.account as Account));
   };
 
   const handleBlockClick: React.EventHandler<React.MouseEvent> = (e) => {
-    e.stopPropagation();
-
     const account = status.get('account') as Account;
+
     dispatch(openModal('CONFIRM', {
       icon: require('@tabler/icons/ban.svg'),
       heading: <FormattedMessage id='confirmations.block.heading' defaultMessage='Block @{name}' values={{ name: account.get('acct') }} />,
@@ -257,7 +240,6 @@ const StatusActionBar: React.FC<IStatusActionBar> = ({
   };
 
   const handleOpen: React.EventHandler<React.MouseEvent> = (e) => {
-    e.stopPropagation();
     history.push(`/@${status.getIn(['account', 'acct'])}/posts/${status.id}`);
   };
 
@@ -269,12 +251,10 @@ const StatusActionBar: React.FC<IStatusActionBar> = ({
   };
 
   const handleReport: React.EventHandler<React.MouseEvent> = (e) => {
-    e.stopPropagation();
     dispatch(initReport(status.account as Account, status));
   };
 
   const handleConversationMuteClick: React.EventHandler<React.MouseEvent> = (e) => {
-    e.stopPropagation();
     dispatch(toggleMuteStatus(status));
   };
 
@@ -282,8 +262,6 @@ const StatusActionBar: React.FC<IStatusActionBar> = ({
     const { uri } = status;
     const textarea = document.createElement('textarea');
 
-    e.stopPropagation();
-
     textarea.textContent = uri;
     textarea.style.position = 'fixed';
 
@@ -300,18 +278,15 @@ const StatusActionBar: React.FC<IStatusActionBar> = ({
   };
 
   const onModerate: React.MouseEventHandler = (e) => {
-    e.stopPropagation();
     const account = status.account as Account;
     dispatch(openModal('ACCOUNT_MODERATION', { accountId: account.id }));
   };
 
   const handleDeleteStatus: React.EventHandler<React.MouseEvent> = (e) => {
-    e.stopPropagation();
     dispatch(deleteStatusModal(intl, status.id));
   };
 
   const handleToggleStatusSensitivity: React.EventHandler<React.MouseEvent> = (e) => {
-    e.stopPropagation();
     dispatch(toggleStatusSensitivityModal(intl, status.id, status.sensitive));
   };
 
@@ -550,12 +525,14 @@ const StatusActionBar: React.FC<IStatusActionBar> = ({
   const canShare = ('share' in navigator) && status.visibility === 'public';
 
   return (
-    <div
-      data-testid='status-action-bar'
-      className={classNames('flex flex-row', {
-        'justify-between': space === 'expand',
-        'space-x-2': space === 'compact',
-      })}
+    <HStack data-testid='status-action-bar'>
+      <HStack
+        justifyContent={space === 'expand' ? 'between' : undefined}
+        space={space === 'compact' ? 2 : undefined}
+        grow={space === 'expand'}
+        onMouseUp={e => e.stopPropagation()}
+        onMouseDown={e => e.stopPropagation()}
+        onClick={e => e.stopPropagation()}
       >
         <StatusActionButton
           title={replyTitle}
@@ -617,7 +594,8 @@ const StatusActionBar: React.FC<IStatusActionBar> = ({
             icon={require('@tabler/icons/dots.svg')}
           />
         </DropdownMenuContainer>
-    </div>
+      </HStack>
+    </HStack>
   );
 };
 

app/soapbox/components/status-content.tsx

@@ -12,6 +12,7 @@ import { isRtl } from '../rtl';
 
 import Poll from './polls/poll';
 import './status-content.css';
+import StopPropagation from './stop-propagation';
 
 import type { Status, Mention } from 'soapbox/types/entities';
 
@@ -29,10 +30,12 @@ interface IReadMoreButton {
 
 /** Button to expand a truncated status (due to too much content) */
 const ReadMoreButton: React.FC<IReadMoreButton> = ({ onClick }) => (
+  <StopPropagation>
     <button className='flex items-center text-gray-900 dark:text-gray-300 border-0 bg-transparent p-0 pt-2 hover:underline active:underline' onClick={onClick}>
       <FormattedMessage id='status.read_more' defaultMessage='Read more' />
       <Icon className='inline-block h-5 w-5' src={require('@tabler/icons/chevron-right.svg')} fixedWidth />
     </button>
+  </StopPropagation>
 );
 
 interface IStatusContent {
@@ -103,6 +106,10 @@ const StatusContent: React.FC<IStatusContent> = ({ status, onClick, collapsable
         link.setAttribute('title', link.href);
         link.addEventListener('click', onLinkClick.bind(link), false);
       }
+
+      // Prevent bubbling
+      link.addEventListener('mouseup', e => e.stopPropagation());
+      link.addEventListener('mousedown', e => e.stopPropagation());
     });
   };
 

app/soapbox/components/status-media.tsx

@@ -2,6 +2,7 @@ import React, { useState } from 'react';
 
 import { openModal } from 'soapbox/actions/modals';
 import AttachmentThumbs from 'soapbox/components/attachment-thumbs';
+import StopPropagation from 'soapbox/components/stop-propagation';
 import PlaceholderCard from 'soapbox/features/placeholder/components/placeholder-card';
 import Card from 'soapbox/features/status/components/card';
 import Bundle from 'soapbox/features/ui/components/bundle';
@@ -173,7 +174,15 @@ const StatusMedia: React.FC<IStatusMedia> = ({
     );
   }
 
-  return media;
+  if (media) {
+    return (
+      <StopPropagation>
+        {media}
+      </StopPropagation>
+    );
+  } else {
+    return null;
+  }
 };
 
 export default StatusMedia;

app/soapbox/components/status-reply-mentions.tsx

@@ -5,6 +5,7 @@ import { Link } from 'react-router-dom';
 import { openModal } from 'soapbox/actions/modals';
 import HoverRefWrapper from 'soapbox/components/hover-ref-wrapper';
 import HoverStatusWrapper from 'soapbox/components/hover-status-wrapper';
+import StopPropagation from 'soapbox/components/stop-propagation';
 import { useAppDispatch } from 'soapbox/hooks';
 
 import type { Account, Status } from 'soapbox/types/entities';
@@ -18,8 +19,6 @@ const StatusReplyMentions: React.FC<IStatusReplyMentions> = ({ status, hoverable
   const dispatch = useAppDispatch();
 
   const handleOpenMentionsModal: React.MouseEventHandler<HTMLSpanElement> = (e) => {
-    e.stopPropagation();
-
     const account = status.account as Account;
 
     dispatch(openModal('MENTIONS', {
@@ -50,7 +49,7 @@ const StatusReplyMentions: React.FC<IStatusReplyMentions> = ({ status, hoverable
   // The typical case with a reply-to and a list of mentions.
   const accounts = to.slice(0, 2).map(account => {
     const link = (
-      <Link to={`/@${account.acct}`} className='reply-mentions__account' onClick={(e) => e.stopPropagation()}>@{account.username}</Link>
+      <Link to={`/@${account.acct}`} className='reply-mentions__account'>@{account.username}</Link>
     );
 
     if (hoverable) {
@@ -73,6 +72,7 @@ const StatusReplyMentions: React.FC<IStatusReplyMentions> = ({ status, hoverable
   }
 
   return (
+    <StopPropagation>
       <div className='reply-mentions'>
         <FormattedMessage
           id='reply_mentions.reply.hoverable'
@@ -99,6 +99,7 @@ const StatusReplyMentions: React.FC<IStatusReplyMentions> = ({ status, hoverable
           }}
         />
       </div>
+    </StopPropagation>
   );
 };
 

app/soapbox/components/status.tsx

@@ -235,7 +235,8 @@ const Status: React.FC<IStatus> = (props) => {
     reblogElement = (
       <NavLink
         to={`/@${status.getIn(['account', 'acct'])}`}
-        onClick={(event) => event.stopPropagation()}
+        onClick={e => e.stopPropagation()}
+        onMouseUp={e => e.stopPropagation()}
         className='hidden sm:flex items-center text-gray-700 dark:text-gray-600 text-xs font-medium space-x-1 hover:underline'
       >
         <Icon src={require('@tabler/icons/repeat.svg')} className='text-green-600' />
@@ -258,7 +259,8 @@ const Status: React.FC<IStatus> = (props) => {
       <div className='pb-5 -mt-2 sm:hidden truncate'>
         <NavLink
           to={`/@${status.getIn(['account', 'acct'])}`}
-          onClick={(event) => event.stopPropagation()}
+          onClick={e => e.stopPropagation()}
+          onMouseUp={e => e.stopPropagation()}
           className='flex items-center text-gray-700 dark:text-gray-600 text-xs font-medium space-x-1 hover:underline'
         >
           <Icon src={require('@tabler/icons/repeat.svg')} className='text-green-600' />

app/soapbox/components/statuses/sensitive-content-overlay.tsx

@@ -5,6 +5,7 @@ import { defineMessages, useIntl } from 'react-intl';
 import { useSettings, useSoapboxConfig } from 'soapbox/hooks';
 import { defaultMediaVisibility } from 'soapbox/utils/status';
 
+import StopPropagation from '../stop-propagation';
 import { Button, HStack, Text } from '../ui';
 
 import type { Status as StatusEntity } from 'soapbox/types/entities';
@@ -38,9 +39,7 @@ const SensitiveContentOverlay = React.forwardRef<HTMLDivElement, ISensitiveConte
 
   const [visible, setVisible] = useState<boolean>(defaultMediaVisibility(status, displayMedia));
 
-  const toggleVisibility = (event: React.MouseEvent<HTMLButtonElement>) => {
-    event.stopPropagation();
-
+  const toggleVisibility = () => {
     if (onToggleVisibility) {
       onToggleVisibility();
     } else {
@@ -64,6 +63,7 @@ const SensitiveContentOverlay = React.forwardRef<HTMLDivElement, ISensitiveConte
       data-testid='sensitive-overlay'
     >
       {visible ? (
+        <StopPropagation>
           <Button
             text={intl.formatMessage(messages.hide)}
             icon={require('@tabler/icons/eye-off.svg')}
@@ -71,6 +71,7 @@ const SensitiveContentOverlay = React.forwardRef<HTMLDivElement, ISensitiveConte
             theme='primary'
             size='sm'
           />
+        </StopPropagation>
       ) : (
         <div className='text-center w-3/4 mx-auto space-y-4' ref={ref}>
           <div className='space-y-1'>
@@ -92,14 +93,11 @@ const SensitiveContentOverlay = React.forwardRef<HTMLDivElement, ISensitiveConte
           </div>
 
           <HStack alignItems='center' justifyContent='center' space={2}>
+            <StopPropagation>
               {isUnderReview ? (
                 <>
                   {links.get('support') && (
-                  <a
-                    href={links.get('support')}
-                    target='_blank'
-                    onClick={(event) => event.stopPropagation()}
-                  >
+                    <a href={links.get('support')} target='_blank'>
                       <Button
                         type='button'
                         theme='outline'
@@ -122,6 +120,7 @@ const SensitiveContentOverlay = React.forwardRef<HTMLDivElement, ISensitiveConte
               >
                 {intl.formatMessage(messages.show)}
               </Button>
+            </StopPropagation>
           </HStack>
         </div>
       )}

app/soapbox/components/stop-propagation.tsx

@@ -0,0 +1,33 @@
+import React from 'react';
+
+interface IStopPropagation {
+  /** Children to render within the bubble. */
+  children: React.ReactNode,
+  /** Whether to prevent mouse events from bubbling. (default: `true`) */
+  enabled?: boolean,
+}
+
+/**
+ * Prevent mouse events from bubbling up.
+ *
+ * Why is this needed? Because `onClick`, `onMouseDown`, and `onMouseUp` are 3 separate events.
+ * To prevent a lot of code duplication, this component can stop all mouse events.
+ * Plus, placing it in the component tree makes it more readable.
+ */
+const StopPropagation: React.FC<IStopPropagation> = ({ children, enabled = true }) => {
+
+  const handler: React.MouseEventHandler<HTMLDivElement> = (e) => {
+    if (enabled) {
+      e.stopPropagation();
+    }
+  };
+
+  return (
+    // eslint-disable-next-line jsx-a11y/no-static-element-interactions
+    <div onClick={handler} onMouseDown={handler} onMouseUp={handler}>
+      {children}
+    </div>
+  );
+};
+
+export default StopPropagation;

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 }} />
 
+        <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 (
+    <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>
   );
 };
 

app/soapbox/components/ui/button/button.tsx

@@ -8,7 +8,7 @@ import { useButtonStyles } from './useButtonStyles';
 
 import type { ButtonSizes, ButtonThemes } from './useButtonStyles';
 
-interface IButton {
+interface IButton extends Pick<React.HTMLAttributes<HTMLButtonElement>, 'onClick' | 'onMouseUp'> {
   /** Whether this button expands the width of its container. */
   block?: boolean,
   /** Elements inside the <button> */
@@ -19,8 +19,6 @@ interface IButton {
   disabled?: boolean,
   /** URL to an SVG icon to render inside the button. */
   icon?: string,
-  /** Action when the button is clicked. */
-  onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void,
   /** A predefined button size. */
   size?: ButtonSizes,
   /** Text inside the button. Takes precedence over `children`. */

app/soapbox/components/ui/hstack/hstack.tsx

@@ -27,7 +27,7 @@ const spaces = {
   8: 'space-x-8',
 };
 
-interface IHStack {
+interface IHStack extends Pick<React.HTMLAttributes<HTMLDivElement>, 'onClick' | 'onMouseUp' | 'onMouseDown'> {
   /** Vertical alignment of children. */
   alignItems?: keyof typeof alignItemsOptions
   /** Extra class names on the <div> element. */

app/soapbox/features/audio/index.tsx

@@ -449,7 +449,6 @@ const Audio: React.FC<IAudio> = (props) => {
       onMouseLeave={handleMouseLeave}
       tabIndex={0}
       onKeyDown={handleKeyDown}
-      onClick={e => e.stopPropagation()}
     >
       <audio
         src={src}

app/soapbox/features/ui/components/profile-dropdown.tsx

@@ -58,7 +58,12 @@ const ProfileDropdown: React.FC<IProfileDropdown> = ({ account, children }) => {
 
   const renderAccount = (account: AccountEntity) => {
     return (
+      <div className='relative'>
+        {/* HACK: The <Account> component stops click events, so insert this div as something to click. */}
+        <div className='absolute inset-0' />
+
         <Account account={account} showProfileHoverCard={false} withLinkToProfile={false} hideActions />
+      </div>
     );
   };
 

app/soapbox/features/video/index.tsx

@@ -183,8 +183,6 @@ const Video: React.FC<IVideo> = ({
     }
   }, [video.current]);
 
-  const handleClickRoot: React.MouseEventHandler = e => e.stopPropagation();
-
   const handlePlay = () => {
     setPaused(false);
   };
@@ -507,7 +505,6 @@ const Video: React.FC<IVideo> = ({
       ref={player}
       onMouseEnter={handleMouseEnter}
       onMouseLeave={handleMouseLeave}
-      onClick={handleClickRoot}
       onKeyDown={handleKeyDown}
       tabIndex={0}
     >