Correctly patch inactive input in Safari

src/components/common/ChatExtra.tsx

@@ -223,7 +223,7 @@ const ChatExtra: FC<OwnProps & StateProps> = ({
           narrow
           isStatic
         >
-          <span className="title word-break text-selection" dir="auto">
+          <span className="title word-break allow-selection" dir="auto">
             {renderText(description, ['br', 'links', 'emoji'])}
           </span>
           <span className="subtitle">{lang(userId ? 'UserBio' : 'Info')}</span>

src/components/mediaViewer/MediaViewerFooter.tsx

@@ -70,7 +70,7 @@ const MediaViewerFooter: FC<OwnProps> = ({
     <div className={classNames} onClick={stopEvent}>
       {Boolean(text) && (
         <div className="media-viewer-footer-content" onClick={!isMobile ? onClick : undefined}>
-          <p className={`media-text custom-scroll text-selection ${isMultiline ? 'multiline' : ''}`} dir="auto">
+          <p className={`media-text custom-scroll allow-selection ${isMultiline ? 'multiline' : ''}`} dir="auto">
             {text}
           </p>
         </div>

src/components/middle/composer/MessageInput.tsx

@@ -521,7 +521,7 @@ const MessageInput: FC<OwnProps & StateProps> = ({
   const isTouched = useDerivedState(() => Boolean(isActive && getHtml()), [isActive, getHtml]);
 
   const className = buildClassName(
-    'form-control',
+    'form-control allow-selection',
     isTouched && 'touched',
     shouldSuppressFocus && 'focus-disabled',
   );

src/components/middle/message/Message.tsx

@@ -563,7 +563,7 @@ const Message: FC<OwnProps & StateProps> = ({
   }, [focusLastMessage, isLastInList, transcribedText, withVoiceTranscription]);
 
   const containerClassName = buildClassName(
-    'Message message-list-item text-selection',
+    'Message message-list-item allow-selection',
     isFirstInGroup && 'first-in-group',
     isProtected && 'is-protected',
     isLastInGroup && 'last-in-group',

src/components/ui/ListItem.tsx

@@ -195,7 +195,7 @@ const ListItem: FC<OwnProps> = ({
   const fullClassName = buildClassName(
     'ListItem',
     className,
-    isStatic && 'text-selection',
+    isStatic && 'allow-selection',
     ripple && 'has-ripple',
     narrow && 'narrow',
     disabled && 'disabled',

src/hooks/useContextMenuHandlers.ts

@@ -31,14 +31,14 @@ const useContextMenuHandlers = (
   const handleBeforeContextMenu = useLastCallback((e: React.MouseEvent) => {
     if (!isMenuDisabled && e.button === 2) {
       requestMutation(() => {
-        removeExtraClass(e.target as HTMLElement, 'text-selection');
+        removeExtraClass(e.target as HTMLElement, 'allow-selection');
       });
     }
   });
 
   const handleContextMenu = useLastCallback((e: React.MouseEvent) => {
     requestMutation(() => {
-      addExtraClass(e.target as HTMLElement, 'text-selection');
+      addExtraClass(e.target as HTMLElement, 'allow-selection');
     });
 
     if (isMenuDisabled || (shouldDisableOnLink && (e.target as HTMLElement).matches('a[href]'))) {

src/styles/index.scss

@@ -25,6 +25,7 @@ body {
   overscroll-behavior: none;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
+  user-select: none;
 
   --font-family: "Roboto", -apple-system, BlinkMacSystemFont, "Apple Color Emoji", "Segoe UI", Oxygen, Ubuntu, Cantarell,
     "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
@@ -115,8 +116,8 @@ body.cursor-ew-resize {
   visibility: hidden;
 }
 
-.text-selection {
-  user-select: text !important;
+.allow-selection {
+  user-select: text;
 }
 
 .clearfix::after {
@@ -167,8 +168,6 @@ body.cursor-ew-resize {
 }
 
 body:not(.is-ios) {
-  user-select: none; // On iOS, disallowing user selection breaks focus in text input fields
-
   .custom-scroll {
     &::-webkit-scrollbar {
       width: 0.375rem;

src/util/deleteLastCharacterOutsideSelection.ts

@@ -5,6 +5,7 @@ export default function deleteLastCharacterOutsideSelection(html: string) {
   tempInput.style.left = '-10000px';
   tempInput.style.top = '-10000px';
   tempInput.innerHTML = html;
+  tempInput.className = 'allow-selection'; // Patch for Safari
   document.body.appendChild(tempInput);
   let element = tempInput.lastChild!;