Always move focus to new panel when showing

ts/state/smart/ConversationPanel.tsx

@@ -0,0 +1,116 @@
+// Copyright 2023 Signal Messenger, LLC
+// SPDX-License-Identifier: AGPL-3.0-only
+
+import React, { useEffect, useMemo, useRef } from 'react';
+import classNames from 'classnames';
+import { useSelector } from 'react-redux';
+import type { PanelRenderType } from '../../types/Panels';
+import type { StateType } from '../reducer';
+import * as log from '../../logging/log';
+import { ContactDetail } from '../../components/conversation/ContactDetail';
+import { PanelType } from '../../types/Panels';
+import { SmartAllMedia } from './AllMedia';
+import { SmartChatColorPicker } from './ChatColorPicker';
+import { SmartConversationDetails } from './ConversationDetails';
+import { SmartConversationNotificationsSettings } from './ConversationNotificationsSettings';
+import { SmartGV1Members } from './GV1Members';
+import { SmartGroupLinkManagement } from './GroupLinkManagement';
+import { SmartGroupV2Permissions } from './GroupV2Permissions';
+import { SmartMessageDetail } from './MessageDetail';
+import { SmartPendingInvites } from './PendingInvites';
+import { SmartStickerManager } from './StickerManager';
+import { getIntl } from '../selectors/user';
+import { getTopPanel } from '../selectors/conversations';
+import { useConversationsActions } from '../ducks/conversations';
+import { focusableSelectors } from '../../util/focusableSelectors';
+
+export function ConversationPanel({
+  conversationId,
+}: {
+  conversationId: string;
+}): JSX.Element | null {
+  const i18n = useSelector(getIntl);
+  const { startConversation } = useConversationsActions();
+  const topPanel = useSelector<StateType, PanelRenderType | undefined>(
+    getTopPanel
+  );
+
+  const selectors = useMemo(() => focusableSelectors.join(','), []);
+  const panelRef = useRef<HTMLDivElement | null>(null);
+  useEffect(() => {
+    const panelNode = panelRef.current;
+    if (!panelNode) {
+      return;
+    }
+
+    const elements = panelNode.querySelectorAll<HTMLElement>(selectors);
+    if (!elements.length) {
+      return;
+    }
+    elements[0]?.focus();
+  }, [selectors, topPanel]);
+
+  if (!topPanel) {
+    return null;
+  }
+
+  let panelChild: JSX.Element;
+  let panelClassName = '';
+
+  if (topPanel.type === PanelType.AllMedia) {
+    panelChild = <SmartAllMedia conversationId={conversationId} />;
+  } else if (topPanel.type === PanelType.ChatColorEditor) {
+    panelChild = <SmartChatColorPicker conversationId={conversationId} />;
+  } else if (topPanel.type === PanelType.ContactDetails) {
+    const { contact, signalAccount } = topPanel.args;
+
+    panelChild = (
+      <ContactDetail
+        contact={contact}
+        hasSignalAccount={Boolean(signalAccount)}
+        i18n={i18n}
+        onSendMessage={() => {
+          if (signalAccount) {
+            startConversation(signalAccount.phoneNumber, signalAccount.uuid);
+          }
+        }}
+      />
+    );
+  } else if (topPanel.type === PanelType.ConversationDetails) {
+    panelClassName = 'conversation-details-pane';
+    panelChild = <SmartConversationDetails conversationId={conversationId} />;
+  } else if (topPanel.type === PanelType.GroupInvites) {
+    panelChild = (
+      <SmartPendingInvites
+        conversationId={conversationId}
+        ourUuid={window.storage.user.getCheckedUuid().toString()}
+      />
+    );
+  } else if (topPanel.type === PanelType.GroupLinkManagement) {
+    panelChild = <SmartGroupLinkManagement conversationId={conversationId} />;
+  } else if (topPanel.type === PanelType.GroupPermissions) {
+    panelChild = <SmartGroupV2Permissions conversationId={conversationId} />;
+  } else if (topPanel.type === PanelType.GroupV1Members) {
+    panelClassName = 'group-member-list';
+    panelChild = <SmartGV1Members conversationId={conversationId} />;
+  } else if (topPanel.type === PanelType.MessageDetails) {
+    panelClassName = 'message-detail-wrapper';
+    panelChild = <SmartMessageDetail />;
+  } else if (topPanel.type === PanelType.NotificationSettings) {
+    panelChild = (
+      <SmartConversationNotificationsSettings conversationId={conversationId} />
+    );
+  } else if (topPanel.type === PanelType.StickerManager) {
+    panelClassName = 'sticker-manager-wrapper';
+    panelChild = <SmartStickerManager />;
+  } else {
+    log.warn('renderPanel: Got unexpected panel', topPanel);
+    return null;
+  }
+
+  return (
+    <div className={classNames('panel', panelClassName)} ref={panelRef}>
+      {panelChild}
+    </div>
+  );
+}

ts/state/smart/ConversationView.tsx

@@ -3,30 +3,15 @@
 
 import React from 'react';
 import { useSelector } from 'react-redux';
-import type { PanelRenderType } from '../../types/Panels';
 import type { StateType } from '../reducer';
-import * as log from '../../logging/log';
+import { ConversationPanel } from './ConversationPanel';
-import { ContactDetail } from '../../components/conversation/ContactDetail';
 import { ConversationView } from '../../components/conversation/ConversationView';
-import { PanelType } from '../../types/Panels';
-import { SmartAllMedia } from './AllMedia';
-import { SmartChatColorPicker } from './ChatColorPicker';
 import { SmartCompositionArea } from './CompositionArea';
-import { SmartConversationDetails } from './ConversationDetails';
 import { SmartConversationHeader } from './ConversationHeader';
-import { SmartConversationNotificationsSettings } from './ConversationNotificationsSettings';
-import { SmartGV1Members } from './GV1Members';
-import { SmartGroupLinkManagement } from './GroupLinkManagement';
-import { SmartGroupV2Permissions } from './GroupV2Permissions';
-import { SmartMessageDetail } from './MessageDetail';
-import { SmartPendingInvites } from './PendingInvites';
-import { SmartStickerManager } from './StickerManager';
 import { SmartTimeline } from './Timeline';
-import { getIntl } from '../selectors/user';
 import {
   getSelectedConversationId,
   getSelectedMessageIds,
-  getTopPanel,
 } from '../selectors/conversations';
 import { useComposerActions } from '../ducks/composer';
 import { useConversationsActions } from '../ducks/conversations';
@@ -38,15 +23,11 @@ export function SmartConversationView(): JSX.Element {
     throw new Error('SmartConversationView: No selected conversation');
   }
 
-  const topPanel = useSelector<StateType, PanelRenderType | undefined>(
+  const { toggleSelectMode } = useConversationsActions();
-    getTopPanel
-  );
-  const { startConversation, toggleSelectMode } = useConversationsActions();
   const selectedMessageIds = useSelector(getSelectedMessageIds);
   const isSelectMode = selectedMessageIds != null;
 
   const { processAttachments } = useComposerActions();
-  const i18n = useSelector(getIntl);
 
   const hasOpenModal = useSelector((state: StateType) => {
     return (
@@ -72,122 +53,7 @@ export function SmartConversationView(): JSX.Element {
       renderTimeline={() => (
         <SmartTimeline key={conversationId} id={conversationId} />
       )}
-      renderPanel={() => {
+      renderPanel={() => <ConversationPanel conversationId={conversationId} />}
-        if (!topPanel) {
-          return;
-        }
-
-        if (topPanel.type === PanelType.AllMedia) {
-          return (
-            <div className="panel">
-              <SmartAllMedia conversationId={conversationId} />
-            </div>
-          );
-        }
-
-        if (topPanel.type === PanelType.ChatColorEditor) {
-          return (
-            <div className="panel">
-              <SmartChatColorPicker conversationId={conversationId} />
-            </div>
-          );
-        }
-
-        if (topPanel.type === PanelType.ContactDetails) {
-          const { contact, signalAccount } = topPanel.args;
-
-          return (
-            <div className="panel">
-              <ContactDetail
-                contact={contact}
-                hasSignalAccount={Boolean(signalAccount)}
-                i18n={i18n}
-                onSendMessage={() => {
-                  if (signalAccount) {
-                    startConversation(
-                      signalAccount.phoneNumber,
-                      signalAccount.uuid
-                    );
-                  }
-                }}
-              />
-            </div>
-          );
-        }
-
-        if (topPanel.type === PanelType.ConversationDetails) {
-          return (
-            <div className="panel conversation-details-pane">
-              <SmartConversationDetails conversationId={conversationId} />
-            </div>
-          );
-        }
-
-        if (topPanel.type === PanelType.GroupInvites) {
-          return (
-            <div className="panel">
-              <SmartPendingInvites
-                conversationId={conversationId}
-                ourUuid={window.storage.user.getCheckedUuid().toString()}
-              />
-            </div>
-          );
-        }
-
-        if (topPanel.type === PanelType.GroupLinkManagement) {
-          return (
-            <div className="panel">
-              <SmartGroupLinkManagement conversationId={conversationId} />
-            </div>
-          );
-        }
-
-        if (topPanel.type === PanelType.GroupPermissions) {
-          return (
-            <div className="panel">
-              <SmartGroupV2Permissions conversationId={conversationId} />
-            </div>
-          );
-        }
-
-        if (topPanel.type === PanelType.GroupV1Members) {
-          return (
-            <div className="group-member-list panel">
-              <SmartGV1Members conversationId={conversationId} />
-            </div>
-          );
-        }
-
-        if (topPanel.type === PanelType.MessageDetails) {
-          return (
-            <div className="panel message-detail-wrapper">
-              <SmartMessageDetail />
-            </div>
-          );
-        }
-
-        if (topPanel.type === PanelType.NotificationSettings) {
-          return (
-            <div className="panel">
-              <SmartConversationNotificationsSettings
-                conversationId={conversationId}
-              />
-            </div>
-          );
-        }
-
-        if (topPanel.type === PanelType.StickerManager) {
-          return (
-            <div className="panel sticker-manager-wrapper">
-              <SmartStickerManager />
-            </div>
-          );
-        }
-
-        log.warn('renderPanel: Got unexpected panel', topPanel);
-
-        return undefined;
-      }}
     />
   );
 }

ts/util/lint/exceptions.json

@@ -2560,6 +2560,13 @@
     "updated": "2023-06-02T00:37:19.861Z",
     "reasonDetail": "Reading from innerHTML, not setting it"
   },
+  {
+    "rule": "React-useRef",
+    "path": "ts/state/smart/ConversationPanel.tsx",
+    "line": "  const panelRef = useRef<HTMLDivElement | null>(null);",
+    "reasonCategory": "usageTrusted",
+    "updated": "2023-06-15T19:55:51.367Z"
+  },
   {
     "rule": "React-useRef",
     "path": "ts/state/smart/InstallScreen.tsx",