Fix message details scrolled down

This commit is contained in:
Josh Perez 2023-08-18 17:48:39 -04:00 committed by Jamie Kyle
parent 9df82c9792
commit 3beea78aff
2 changed files with 4 additions and 25 deletions

View file

@ -2,7 +2,7 @@
// SPDX-License-Identifier: AGPL-3.0-only // SPDX-License-Identifier: AGPL-3.0-only
import type { ReactChild, ReactNode } from 'react'; import type { ReactChild, ReactNode } from 'react';
import React, { useEffect, useRef } from 'react'; import React, { useRef } from 'react';
import classNames from 'classnames'; import classNames from 'classnames';
import { noop } from 'lodash'; import { noop } from 'lodash';
@ -149,20 +149,8 @@ export function MessageDetail({
toggleSafetyNumberModal, toggleSafetyNumberModal,
viewStory, viewStory,
}: Props): JSX.Element { }: Props): JSX.Element {
const focusRef = useRef<HTMLDivElement>(null);
const messageContainerRef = useRef<HTMLDivElement>(null); const messageContainerRef = useRef<HTMLDivElement>(null);
useEffect(() => {
const timer = setTimeout(() => {
// When this component is created, it's initially not part of the DOM, and then it's
// added off-screen and animated in. This ensures that the focus takes.
focusRef.current?.focus();
});
return () => {
clearTimeout(timer);
};
}, []);
function renderAvatar(contact: Contact): JSX.Element { function renderAvatar(contact: Contact): JSX.Element {
const { const {
acceptedMessageRequest, acceptedMessageRequest,
@ -327,8 +315,7 @@ export function MessageDetail({
: undefined; : undefined;
return ( return (
// eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex <div className="module-message-detail">
<div className="module-message-detail" tabIndex={0} ref={focusRef}>
<PanelSection> <PanelSection>
<div <div
className="module-message-detail__message-container" className="module-message-detail__message-container"

View file

@ -1131,7 +1131,7 @@
"path": "node_modules/make-dir/node_modules/pify/index.js", "path": "node_modules/make-dir/node_modules/pify/index.js",
"line": "\t\tif (options.multiArgs) {", "line": "\t\tif (options.multiArgs) {",
"reasonCategory": "falseMatch", "reasonCategory": "falseMatch",
"updated": "2023-08-17T21:23:20.930Z" "updated": "2023-08-18T19:09:30.283Z"
}, },
{ {
"rule": "DOM-innerHTML", "rule": "DOM-innerHTML",
@ -2120,8 +2120,7 @@
"path": "ts/components/CallsList.tsx", "path": "ts/components/CallsList.tsx",
"line": " const prevOptionsRef = useRef<CallHistoryFilterOptions | null>(null);", "line": " const prevOptionsRef = useRef<CallHistoryFilterOptions | null>(null);",
"reasonCategory": "usageTrusted", "reasonCategory": "usageTrusted",
"updated": "2023-08-17T00:07:01.015Z", "updated": "2023-08-18T19:09:30.283Z"
"reasonDetail": "<optional>"
}, },
{ {
"rule": "React-useRef", "rule": "React-useRef",
@ -2690,13 +2689,6 @@
"updated": "2023-06-30T22:12:49.259Z", "updated": "2023-06-30T22:12:49.259Z",
"reasonDetail": "Used for excluding the message metadata from triple-click selections." "reasonDetail": "Used for excluding the message metadata from triple-click selections."
}, },
{
"rule": "React-useRef",
"path": "ts/components/conversation/MessageDetail.tsx",
"line": " const focusRef = useRef<HTMLDivElement>(null);",
"reasonCategory": "usageTrusted",
"updated": "2023-04-12T15:51:28.066Z"
},
{ {
"rule": "React-useRef", "rule": "React-useRef",
"path": "ts/components/conversation/MessageDetail.tsx", "path": "ts/components/conversation/MessageDetail.tsx",