From c91fb99c055f9999e243c03d5f137f6211f26106 Mon Sep 17 00:00:00 2001
From: Alexander Zinchuk <alx.zinchuk@gmail.com>
Date: Fri, 21 Jul 2023 17:47:32 +0200
Subject: [PATCH] Correctly patch inactive input in Safari

---
 src/components/common/ChatExtra.tsx              | 2 +-
 src/components/mediaViewer/MediaViewerFooter.tsx | 2 +-
 src/components/middle/composer/MessageInput.tsx  | 2 +-
 src/components/middle/message/Message.tsx        | 2 +-
 src/components/ui/ListItem.tsx                   | 2 +-
 src/hooks/useContextMenuHandlers.ts              | 4 ++--
 src/styles/index.scss                            | 7 +++----
 src/util/deleteLastCharacterOutsideSelection.ts  | 1 +
 8 files changed, 11 insertions(+), 11 deletions(-)

diff --git a/src/components/common/ChatExtra.tsx b/src/components/common/ChatExtra.tsx
index e6e33dcbd..4ee44d4cb 100644
--- a/src/components/common/ChatExtra.tsx
+++ b/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>
diff --git a/src/components/mediaViewer/MediaViewerFooter.tsx b/src/components/mediaViewer/MediaViewerFooter.tsx
index c0e5b369b..0891f9696 100644
--- a/src/components/mediaViewer/MediaViewerFooter.tsx
+++ b/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>
diff --git a/src/components/middle/composer/MessageInput.tsx b/src/components/middle/composer/MessageInput.tsx
index 6c3b3f130..138ac45d4 100644
--- a/src/components/middle/composer/MessageInput.tsx
+++ b/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',
   );
diff --git a/src/components/middle/message/Message.tsx b/src/components/middle/message/Message.tsx
index 22eae7168..972f03555 100644
--- a/src/components/middle/message/Message.tsx
+++ b/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',
diff --git a/src/components/ui/ListItem.tsx b/src/components/ui/ListItem.tsx
index c6ca3b51a..20dae3f72 100644
--- a/src/components/ui/ListItem.tsx
+++ b/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',
diff --git a/src/hooks/useContextMenuHandlers.ts b/src/hooks/useContextMenuHandlers.ts
index ca4c9b3a3..e14f06a60 100644
--- a/src/hooks/useContextMenuHandlers.ts
+++ b/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]'))) {
diff --git a/src/styles/index.scss b/src/styles/index.scss
index e60e50ff0..58d4407db 100644
--- a/src/styles/index.scss
+++ b/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;
diff --git a/src/util/deleteLastCharacterOutsideSelection.ts b/src/util/deleteLastCharacterOutsideSelection.ts
index 2c1d3ae51..627a560e9 100644
--- a/src/util/deleteLastCharacterOutsideSelection.ts
+++ b/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!;