Auto-focus message composer on keypress with user toggle

_locales/en/messages.json

@@ -2865,6 +2865,14 @@
     "messageformat": "Show text formatting popover when text is selected",
     "description": "Description of the text-formatting popover menu setting"
   },
+  "icu:Preferences__typing-auto-focus--title": {
+    "messageformat": "Auto-focus message input when typing",
+    "description": "Title for the setting that automatically focuses the message composition area when a key is pressed"
+  },
+  "icu:Preferences__typing-auto-focus--description": {
+    "messageformat": "Automatically focus the message input field when you start typing, even if it isn't currently focused.",
+    "description": "Description for the auto-focus typing setting"
+  },
   "icu:spellCheckWillBeEnabled": {
     "messageformat": "Spell check will be enabled the next time Signal starts.",
     "description": "Shown when the user enables spellcheck to indicate that they must restart Signal."

ts/components/CompositionArea.dom.stories.tsx

@@ -79,6 +79,7 @@ export default {
     i18n,
     isDisabled: false,
     isFormattingEnabled: true,
+    isTypingAutoFocusEnabled: true,
     messageCompositionId: '456',
     sendEditedMessage: action('sendEditedMessage'),
     sendMultiMediaMessage: action('sendMultiMediaMessage'),

ts/components/CompositionArea.dom.tsx

@@ -123,6 +123,7 @@ export type OwnProps = Readonly<{
   isDisabled: boolean;
   isFetchingUUID: boolean | null;
   isFormattingEnabled: boolean;
+  isTypingAutoFocusEnabled: boolean;
   isGroupV1AndDisabled: boolean | null;
   isMissingMandatoryProfileSharing: boolean | null;
   isSignalConversation: boolean | null;
@@ -290,6 +291,7 @@ export const CompositionArea = memo(function CompositionArea({
   draftText,
   getPreferredBadge,
   isFormattingEnabled,
+  isTypingAutoFocusEnabled,
   onEditorStateChange,
   onTextTooLong,
   ourConversationId,
@@ -496,6 +498,53 @@ export const CompositionArea = memo(function CompositionArea({
     }
   });
 
+  // Auto-focus composer when user presses a printable key
+  useDocumentKeyDown(
+    useCallback(
+      (event: KeyboardEvent) => {
+        if (!isTypingAutoFocusEnabled) {
+          return;
+        }
+
+        if (inputApiRef.current?.hasFocus()) {
+          return;
+        }
+
+        // Printable keys have a single-char `key` value
+        if (event.key.length !== 1) {
+          return;
+        }
+
+        // Don't hijack keyboard shortcuts
+        if (event.ctrlKey || event.metaKey || event.altKey) {
+          return;
+        }
+
+        // Don't steal focus from other input elements
+        const active = document.activeElement;
+        if (active) {
+          const tag = active.tagName.toLowerCase();
+          if (
+            tag === 'input' ||
+            tag === 'textarea' ||
+            tag === 'select'
+          ) {
+            return;
+          }
+          if (
+            active.getAttribute('contenteditable') === 'true' ||
+            active.getAttribute('role') === 'textbox'
+          ) {
+            return;
+          }
+        }
+
+        inputApiRef.current?.focus();
+      },
+      [isTypingAutoFocusEnabled]
+    )
+  );
+
   // Focus input on first mount
   const previousFocusCounter = usePrevious<number | undefined>(
     focusCounter,

ts/components/Preferences.dom.stories.tsx

@@ -452,6 +452,7 @@ export default {
     hasSpellCheck: true,
     hasStoriesDisabled: false,
     hasTextFormatting: true,
+    hasTypingAutoFocus: true,
     hasTypingIndicators: true,
     hasKeepMutedChatsArchived: false,
     initialSpellCheckSetting: true,
@@ -588,6 +589,7 @@ export default {
     onSpellCheckChange: action('onSpellCheckChange'),
     onStartUpdate: action('onStartUpdate'),
     onTextFormattingChange: action('onTextFormattingChange'),
+    onTypingAutoFocusChange: action('onTypingAutoFocusChange'),
     onThemeChange: action('onThemeChange'),
     onToggleNavTabsCollapse: action('onToggleNavTabsCollapse'),
     onUniversalExpireTimerChange: action('onUniversalExpireTimerChange'),

ts/components/Preferences.dom.tsx

@@ -156,6 +156,7 @@ export type PropsDataType = {
   hasSpellCheck: boolean | undefined;
   hasStoriesDisabled: boolean;
   hasTextFormatting: boolean;
+  hasTypingAutoFocus: boolean;
   hasTypingIndicators: boolean;
   hasKeepMutedChatsArchived: boolean;
   settingsLocation: SettingsLocation;
@@ -326,6 +327,7 @@ type PropsFunctionType = {
   onSentMediaQualityChange: SelectChangeHandlerType<SentMediaQualityType>;
   onSpellCheckChange: CheckboxChangeHandlerType;
   onTextFormattingChange: CheckboxChangeHandlerType;
+  onTypingAutoFocusChange: CheckboxChangeHandlerType;
   onThemeChange: SelectChangeHandlerType<ThemeType>;
   onToggleNavTabsCollapse: (navTabsCollapsed: boolean) => void;
   onUniversalExpireTimerChange: SelectChangeHandlerType<number>;
@@ -433,6 +435,7 @@ export function Preferences({
   hasSpellCheck,
   hasStoriesDisabled,
   hasTextFormatting,
+  hasTypingAutoFocus,
   hasTypingIndicators,
   hasKeepMutedChatsArchived,
   i18n,
@@ -490,6 +493,7 @@ export function Preferences({
   onSentMediaQualityChange,
   onSpellCheckChange,
   onTextFormattingChange,
+  onTypingAutoFocusChange,
   onThemeChange,
   onToggleNavTabsCollapse,
   onUniversalExpireTimerChange,
@@ -1149,6 +1153,16 @@ export function Preferences({
             name="textFormatting"
             onChange={onTextFormattingChange}
           />
+          <Checkbox
+            checked={hasTypingAutoFocus}
+            description={i18n(
+              'icu:Preferences__typing-auto-focus--description'
+            )}
+            label={i18n('icu:Preferences__typing-auto-focus--title')}
+            moduleClassName="Preferences__checkbox"
+            name="typingAutoFocus"
+            onChange={onTypingAutoFocusChange}
+          />
           <Checkbox
             checked={hasLinkPreviews}
             description={i18n('icu:Preferences__link-previews--description')}

ts/state/selectors/items.dom.ts

@@ -256,6 +256,11 @@ export const getTextFormattingEnabled = createSelector(
   (state: ItemsStateType): boolean => Boolean(state.textFormatting ?? true)
 );
 
+export const getTypingAutoFocus = createSelector(
+  getItems,
+  (state: ItemsStateType): boolean => Boolean(state.typingAutoFocus ?? true)
+);
+
 export const getNavTabsCollapsed = createSelector(
   getItems,
   (state: ItemsStateType): boolean => Boolean(state.navTabsCollapsed ?? false)

ts/state/smart/CompositionArea.preload.tsx

@@ -37,6 +37,7 @@ import {
   getDefaultConversationColor,
   getEmojiSkinToneDefault,
   getTextFormattingEnabled,
+  getTypingAutoFocus,
 } from '../selectors/items.dom.js';
 import { canForward, getPropsForQuote } from '../selectors/message.preload.js';
 import {
@@ -85,6 +86,7 @@ export const SmartCompositionArea = memo(function SmartCompositionArea({
   const selectedMessageIds = useSelector(getSelectedMessageIds);
   const messageLookup = useSelector(getMessages);
   const isFormattingEnabled = useSelector(getTextFormattingEnabled);
+  const isTypingAutoFocusEnabled = useSelector(getTypingAutoFocus);
   const lastEditableMessageId = useSelector(getLastEditableMessageId);
   const platform = useSelector(getPlatform);
   const shouldHidePopovers = useSelector(getHasPanelOpen);
@@ -242,6 +244,7 @@ export const SmartCompositionArea = memo(function SmartCompositionArea({
       i18n={i18n}
       isDisabled={isDisabled}
       isFormattingEnabled={isFormattingEnabled}
+      isTypingAutoFocusEnabled={isTypingAutoFocusEnabled}
       isActive={isActive}
       lastEditableMessageId={lastEditableMessageId ?? null}
       messageCompositionId={messageCompositionId}

ts/state/smart/Preferences.preload.tsx

@@ -707,6 +707,10 @@ export function SmartPreferences(): React.JSX.Element | null {
     'textFormatting',
     true
   );
+  const [hasTypingAutoFocus, onTypingAutoFocusChange] = createItemsAccess(
+    'typingAutoFocus',
+    true
+  );
   const [lastSyncTime, onLastSyncTimeChange] = createItemsAccess(
     'synced_at',
     undefined
@@ -866,6 +870,7 @@ export function SmartPreferences(): React.JSX.Element | null {
           hasSpellCheck={hasSpellCheck}
           hasStoriesDisabled={hasStoriesDisabled}
           hasTextFormatting={hasTextFormatting}
+          hasTypingAutoFocus={hasTypingAutoFocus}
           hasTypingIndicators={hasTypingIndicators}
           i18n={i18n}
           initialSpellCheckSetting={initialSpellCheckSetting}
@@ -930,6 +935,7 @@ export function SmartPreferences(): React.JSX.Element | null {
           onSentMediaQualityChange={onSentMediaQualityChange}
           onSpellCheckChange={onSpellCheckChange}
           onTextFormattingChange={onTextFormattingChange}
+          onTypingAutoFocusChange={onTypingAutoFocusChange}
           onThemeChange={onThemeChange}
           onToggleNavTabsCollapse={toggleNavTabsCollapse}
           onUniversalExpireTimerChange={onUniversalExpireTimerChange}

ts/types/Storage.d.ts

@@ -142,6 +142,7 @@ export type StorageAccessType = {
   pinnedConversationIds: ReadonlyArray<string>;
   preferContactAvatars: boolean;
   textFormatting: boolean;
+  typingAutoFocus: boolean;
   typingIndicators: boolean;
   sealedSenderIndicators: boolean;
   storageFetchComplete: boolean;

ts/types/StorageUIKeys.std.ts

@@ -39,6 +39,7 @@ export const STORAGE_UI_KEYS: ReadonlyArray<keyof StorageAccessType> = [
   'showStickersIntroduction',
   'emojiSkinToneDefault',
   'textFormatting',
+  'typingAutoFocus',
   'version',
   'zoomFactor',
 ];