Revert "Message Input: Allow typing even when not focused (#2135)"

This reverts commit 2b37128066e139989dbfd612e2c2e3e5b889f759.

src/components/mediaViewer/MediaViewer.tsx

@@ -31,7 +31,6 @@ import { IS_SINGLE_COLUMN_LAYOUT, IS_TOUCH_ENV } from '../../util/environment';
 import { ANIMATION_END_DELAY } from '../../config';
 import { MEDIA_VIEWER_MEDIA_QUERY } from '../common/helpers/mediaDimensions';
 import windowSize from '../../util/windowSize';
-import { disableDirectTextInput, enableDirectTextInput } from '../../util/directInputManager';
 import { animateClosing, animateOpening } from './helpers/ghostAnimation';
 import { renderMessageText } from '../common/helpers/renderMessageText';
 
@@ -147,16 +146,6 @@ const MediaViewer: FC<StateProps> = ({
     animationKey.current = selectedMediaIndex;
   }
 
-  useEffect(() => {
-    if (!isOpen) {
-      return undefined;
-    }
-
-    disableDirectTextInput();
-
-    return enableDirectTextInput;
-  }, [isOpen]);
-
   useEffect(() => {
     if (isVisible) {
       exitPictureInPictureIfNeeded();

src/components/middle/composer/Composer.tsx

@@ -1237,7 +1237,6 @@ const Composer: FC<OwnProps & StateProps> = ({
           )}
           <MessageInput
             id="message-input-text"
-            editableInputId={EDITABLE_INPUT_ID}
             chatId={chatId}
             threadId={threadId}
             html={!attachments.length ? html : ''}
@@ -1248,7 +1247,6 @@ const Composer: FC<OwnProps & StateProps> = ({
             }
             forcedPlaceholder={inlineBotHelp}
             canAutoFocus={isReady && !attachments.length}
-            noFocusInterception={attachments.length > 0}
             shouldSuppressFocus={IS_SINGLE_COLUMN_LAYOUT && isSymbolMenuOpen}
             shouldSuppressTextFormatter={isEmojiTooltipOpen || isMentionTooltipOpen || isInlineBotTooltipOpen}
             onUpdate={setHtml}

src/components/middle/composer/MessageInput.tsx

@@ -8,7 +8,7 @@ import { getActions, withGlobal } from '../../../global';
 import type { IAnchorPosition, ISettings } from '../../../types';
 
 import { EDITABLE_INPUT_ID } from '../../../config';
-import { selectIsInSelectMode, selectReplyingToId } from '../../../global/selectors';
+import { selectReplyingToId } from '../../../global/selectors';
 import { debounce } from '../../../util/schedulers';
 import focusEditableElement from '../../../util/focusEditableElement';
 import buildClassName from '../../../util/buildClassName';
@@ -16,7 +16,6 @@ import {
   IS_ANDROID, IS_EMOJI_SUPPORTED, IS_IOS, IS_SINGLE_COLUMN_LAYOUT, IS_TOUCH_ENV,
 } from '../../../util/environment';
 import captureKeyboardListeners from '../../../util/captureKeyboardListeners';
-import { getIsDirectTextInputDisabled } from '../../../util/directInputManager';
 import useLayoutEffectWithPrevDeps from '../../../hooks/useLayoutEffectWithPrevDeps';
 import useFlag from '../../../hooks/useFlag';
 import { isHeavyAnimating } from '../../../hooks/useHeavyAnimationCheck';
@@ -41,7 +40,6 @@ type OwnProps = {
   html: string;
   placeholder: string;
   forcedPlaceholder?: string;
-  noFocusInterception?: boolean;
   canAutoFocus: boolean;
   shouldSuppressFocus?: boolean;
   shouldSuppressTextFormatter?: boolean;
@@ -53,7 +51,7 @@ type OwnProps = {
 
 type StateProps = {
   replyingToId?: number;
-  isSelectModeActive?: boolean;
+  noTabCapture?: boolean;
   messageSendKeyCombo?: ISettings['messageSendKeyCombo'];
 };
 
@@ -64,7 +62,6 @@ const SELECTION_RECALCULATE_DELAY_MS = 260;
 const TEXT_FORMATTER_SAFE_AREA_PX = 90;
 // For some reason Safari inserts `<br>` after user removes text from input
 const SAFARI_BR = '<br>';
-const IGNORE_KEYS = ['Enter', 'PageUp', 'PageDown', 'Meta', 'Alt', 'Ctrl', 'ArrowDown', 'ArrowUp'];
 
 function clearSelection() {
   const selection = window.getSelection();
@@ -89,11 +86,10 @@ const MessageInput: FC<OwnProps & StateProps> = ({
   placeholder,
   forcedPlaceholder,
   canAutoFocus,
-  noFocusInterception,
   shouldSuppressFocus,
   shouldSuppressTextFormatter,
   replyingToId,
-  isSelectModeActive,
+  noTabCapture,
   messageSendKeyCombo,
   onUpdate,
   onSuppressedFocus,
@@ -367,68 +363,19 @@ const MessageInput: FC<OwnProps & StateProps> = ({
   }, [chatId, focusInput, replyingToId, canAutoFocus]);
 
   useEffect(() => {
-    if (
-      !chatId
-      || editableInputId !== EDITABLE_INPUT_ID
-      || noFocusInterception
-      || (IS_TOUCH_ENV && IS_SINGLE_COLUMN_LAYOUT)
-      || isSelectModeActive
-    ) {
+    if (noTabCapture) {
       return undefined;
     }
 
-    const handleDocumentKeyDown = (e: KeyboardEvent) => {
-      if (getIsDirectTextInputDisabled()) {
-        return;
-      }
-
-      const { key } = e;
-      const target = e.target as HTMLElement | undefined;
-
-      if (!target || IGNORE_KEYS.includes(key)) {
-        return;
-      }
-
-      const input = inputRef.current!;
-      const isSelectionCollapsed = document.getSelection()?.isCollapsed;
-
-      if (
-        ((key.startsWith('Arrow') || (e.shiftKey && key === 'Shift')) && !isSelectionCollapsed)
-        || (e.code === 'KeyC' && (e.ctrlKey || e.metaKey) && target.tagName !== 'INPUT')
-      ) {
-        return;
-      }
-
-      if (
-        input
-        && target !== input
-        && target.tagName !== 'INPUT'
-        && !target.isContentEditable
-      ) {
-        focusEditableElement(input, true, true);
-
-        const newEvent = new KeyboardEvent(e.type, e as any);
-        input.dispatchEvent(newEvent);
-      }
-    };
-
-    document.addEventListener('keydown', handleDocumentKeyDown, true);
-
-    return () => {
-      document.removeEventListener('keydown', handleDocumentKeyDown, true);
-    };
-  }, [chatId, editableInputId, isSelectModeActive, noFocusInterception]);
-
-  useEffect(() => {
     const captureFirstTab = debounce((e: KeyboardEvent) => {
-      if (e.key === 'Tab' && !getIsDirectTextInputDisabled()) {
+      if (e.key === 'Tab') {
         e.preventDefault();
         requestAnimationFrame(focusInput);
       }
     }, TAB_INDEX_PRIORITY_TIMEOUT, true, false);
 
     return captureKeyboardListeners({ onTab: captureFirstTab });
-  }, [focusInput]);
+  }, [focusInput, noTabCapture]);
 
   useEffect(() => {
     const input = inputRef.current!;
@@ -497,7 +444,7 @@ export default memo(withGlobal<OwnProps>(
     return {
       messageSendKeyCombo,
       replyingToId: chatId && threadId ? selectReplyingToId(global, chatId, threadId) : undefined,
-      isSelectModeActive: selectIsInSelectMode(global),
+      noTabCapture: global.pollModal.isOpen || global.payment.isPaymentModalOpen,
     };
   },
 )(MessageInput));

src/components/ui/Modal.tsx

@@ -7,7 +7,6 @@ import type { TextPart } from '../../types';
 import captureKeyboardListeners from '../../util/captureKeyboardListeners';
 import trapFocus from '../../util/trapFocus';
 import buildClassName from '../../util/buildClassName';
-import { enableDirectTextInput, disableDirectTextInput } from '../../util/directInputManager';
 import { dispatchHeavyAnimationEvent } from '../../hooks/useHeavyAnimationCheck';
 import useShowTransition from '../../hooks/useShowTransition';
 import useEffectWithPrevDeps from '../../hooks/useEffectWithPrevDeps';
@@ -64,16 +63,6 @@ const Modal: FC<OwnProps & StateProps> = ({
   // eslint-disable-next-line no-null/no-null
   const modalRef = useRef<HTMLDivElement>(null);
 
-  useEffect(() => {
-    if (!isOpen) {
-      return undefined;
-    }
-
-    disableDirectTextInput();
-
-    return enableDirectTextInput;
-  }, [isOpen]);
-
   useEffect(() => (isOpen
     ? captureKeyboardListeners({ onEsc: onClose, onEnter })
     : undefined), [isOpen, onClose, onEnter]);

src/util/directInputManager.ts

@@ -1,13 +0,0 @@
-let counter = 0;
-
-export function disableDirectTextInput() {
-  counter += 1;
-}
-
-export function enableDirectTextInput() {
-  counter -= 1;
-}
-
-export function getIsDirectTextInputDisabled() {
-  return counter > 0;
-}