diff --git a/app/soapbox/components/status.tsx b/app/soapbox/components/status.tsx index 3ae18b8fc..d24ebd0ce 100644 --- a/app/soapbox/components/status.tsx +++ b/app/soapbox/components/status.tsx @@ -102,6 +102,7 @@ interface IStatus extends RouteComponentProps { } interface IStatusState { + isDragging: boolean, showMedia: boolean, statusId?: string, emojiSelectorFocused: boolean, @@ -128,6 +129,7 @@ class Status extends ImmutablePureComponent { ]; state: IStatusState = { + isDragging: false, showMedia: defaultMediaVisibility(this.props.status, this.props.displayMedia), statusId: undefined, emojiSelectorFocused: false, @@ -191,7 +193,9 @@ class Status extends ImmutablePureComponent { this.setState({ showMedia: !this.state.showMedia }); } - handleClick = (): void => { + handleClick = (event: any): void => { + event.stopPropagation(); + if (this.props.onClick) { this.props.onClick(); return; @@ -605,7 +609,13 @@ class Status extends ImmutablePureComponent { data-featured={featured ? 'true' : null} aria-label={textForScreenReader(intl, status, rebloggedByText)} ref={this.handleRef} - onClick={() => this.props.history.push(statusUrl)} + onMouseUp={() => { + if (!this.state.isDragging) { + this.props.history.push(statusUrl); + } + }} + onMouseDown={() => this.setState({ isDragging: false })} + onMouseMove={() => this.setState({ isDragging: true })} role='link' > {prepend} diff --git a/app/soapbox/components/status_content.tsx b/app/soapbox/components/status_content.tsx index 9cbafa67f..9f4308bf2 100644 --- a/app/soapbox/components/status_content.tsx +++ b/app/soapbox/components/status_content.tsx @@ -67,7 +67,7 @@ interface IStatusContent { status: Status, expanded?: boolean, onExpandedToggle?: () => void, - onClick?: () => void, + onClick?: (event: React.MouseEvent) => void, collapsable?: boolean, } @@ -182,7 +182,7 @@ const StatusContent: React.FC = ({ status, expanded = false, onE } if (deltaX + deltaY < 5 && e.button === 0 && onClick) { - onClick(); + onClick(e); } startXY.current = undefined;