[MM-54758] Thread/posts jump when switching to and from preview mode (#25085)

* chore: add scss

* chore: add display-none alternation between components

* chore: remove unwanted change

* feat: use :not css not selector to switch between preview mode and edit mode

* chore: fix test snaps

---------

Co-authored-by: Sudheer Tripathi <sudheer@clearglass.com>

webapp/channels/src/components/__snapshots__/textbox.test.tsx.snap

@@ -1,6 +1,136 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`components/TextBox should match snapshot with additional, optional props 1`] = `
+<div
+  className="textarea-wrapper textarea-wrapper-preview"
+>
+  <div
+    className="form-control custom-textarea textbox-preview-area"
+    onBlur={[Function]}
+    onKeyDown={[Function]}
+    onKeyPress={[Function]}
+    tabIndex={0}
+  >
+    <Connect(PostMarkdown)
+      channelId="channelId"
+      imageProps={
+        Object {
+          "hideUtilities": true,
+        }
+      }
+      mentionKeys={Array []}
+      message="some test text"
+    />
+  </div>
+  <Connect(SuggestionBox)
+    channelId="channelId"
+    className="form-control custom-textarea textbox-edit-area custom-textarea--emoji-picker bad-connection"
+    contextId="channelId"
+    disabled={true}
+    id="someid"
+    inputComponent={
+      Object {
+        "$$typeof": Symbol(react.memo),
+        "compare": null,
+        "type": Object {
+          "$$typeof": Symbol(react.forward_ref),
+          "propTypes": Object {
+            "className": [Function],
+            "defaultValue": [Function],
+            "disabled": [Function],
+            "id": [Function],
+            "onChange": [Function],
+            "onHeightChange": [Function],
+            "onInput": [Function],
+            "onWidthChange": [Function],
+            "placeholder": [Function],
+            "value": [Function],
+          },
+          "render": [Function],
+        },
+      }
+    }
+    listComponent={[Function]}
+    listPosition="top"
+    onBlur={[Function]}
+    onChange={[Function]}
+    onComposition={[Function]}
+    onHeightChange={[Function]}
+    onKeyDown={[Function]}
+    onKeyPress={[Function]}
+    onKeyUp={[Function]}
+    onMouseUp={[Function]}
+    openWhenEmpty={true}
+    placeholder="placeholder text"
+    providers={
+      Array [
+        AtMentionProvider {
+          "addLastViewAtToProfiles": [Function],
+          "autocompleteGroups": Array [
+            Object {
+              "id": "gid1",
+            },
+            Object {
+              "id": "gid2",
+            },
+          ],
+          "autocompleteUsersInChannel": [Function],
+          "channelId": "channelId",
+          "currentUserId": "currentUserId",
+          "data": null,
+          "disableDispatches": false,
+          "forceDispatch": false,
+          "getProfilesInChannel": [Function],
+          "lastCompletedWord": "",
+          "lastPrefixWithNoResults": "",
+          "latestComplete": true,
+          "latestPrefix": "",
+          "priorityProfiles": undefined,
+          "requestStarted": false,
+          "searchAssociatedGroupsForReference": [Function],
+          "triggerCharacter": "@",
+          "useChannelMentions": true,
+        },
+        ChannelMentionProvider {
+          "autocompleteChannels": [MockFunction],
+          "delayChannelAutocomplete": false,
+          "disableDispatches": false,
+          "forceDispatch": false,
+          "lastCompletedWord": "",
+          "lastPrefixTrimmed": "",
+          "lastPrefixWithNoResults": "",
+          "latestComplete": true,
+          "latestPrefix": "",
+          "requestStarted": false,
+          "triggerCharacter": "~",
+        },
+        EmoticonProvider {
+          "disableDispatches": false,
+          "forceDispatch": false,
+          "latestComplete": true,
+          "latestPrefix": "",
+          "requestStarted": false,
+          "triggerCharacter": ":",
+        },
+      ]
+    }
+    renderDividers={
+      Array [
+        "all",
+      ]
+    }
+    spellCheck="true"
+    style={
+      Object {
+        "visibility": "hidden",
+      }
+    }
+    value="some test text"
+  />
+</div>
+`;
+
+exports[`components/TextBox should match snapshot with required props 1`] = `
 <div
   className="textarea-wrapper"
 >
@@ -22,16 +152,9 @@ exports[`components/TextBox should match snapshot with additional, optional prop
       message="some test text"
     />
   </div>
-</div>
-`;
-
-exports[`components/TextBox should match snapshot with required props 1`] = `
-<div
-  className="textarea-wrapper"
->
   <Connect(SuggestionBox)
     channelId="channelId"
-    className="form-control custom-textarea"
+    className="form-control custom-textarea textbox-edit-area"
     contextId="channelId"
     id="someid"
     inputComponent={
@@ -136,9 +259,27 @@ exports[`components/TextBox should throw error when new property is too long 1`]
 <div
   className="textarea-wrapper"
 >
+  <div
+    className="form-control custom-textarea textbox-preview-area"
+    onBlur={[Function]}
+    onKeyDown={[Function]}
+    onKeyPress={[Function]}
+    tabIndex={0}
+  >
+    <Connect(PostMarkdown)
+      channelId="channelId"
+      imageProps={
+        Object {
+          "hideUtilities": true,
+        }
+      }
+      mentionKeys={Array []}
+      message="some test text that exceeds char limit"
+    />
+  </div>
   <Connect(SuggestionBox)
     channelId="channelId"
-    className="form-control custom-textarea"
+    className="form-control custom-textarea textbox-edit-area"
     contextId="channelId"
     id="someid"
     inputComponent={
@@ -243,9 +384,27 @@ exports[`components/TextBox should throw error when value is too long 1`] = `
 <div
   className="textarea-wrapper"
 >
+  <div
+    className="form-control custom-textarea textbox-preview-area"
+    onBlur={[Function]}
+    onKeyDown={[Function]}
+    onKeyPress={[Function]}
+    tabIndex={0}
+  >
+    <Connect(PostMarkdown)
+      channelId="channelId"
+      imageProps={
+        Object {
+          "hideUtilities": true,
+        }
+      }
+      mentionKeys={Array []}
+      message="some test text that exceeds char limit"
+    />
+  </div>
   <Connect(SuggestionBox)
     channelId="channelId"
-    className="form-control custom-textarea"
+    className="form-control custom-textarea textbox-edit-area"
     contextId="channelId"
     id="someid"
     inputComponent={

webapp/channels/src/components/textbox/textbox.tsx

@@ -263,7 +263,7 @@ export default class Textbox extends React.PureComponent<Props> {
     };
 
     render() {
-        let textboxClassName = 'form-control custom-textarea';
+        let textboxClassName = 'form-control custom-textarea textbox-edit-area';
         if (this.props.emojiEnabled) {
             textboxClassName += ' custom-textarea--emoji-picker';
         }
@@ -274,36 +274,26 @@ export default class Textbox extends React.PureComponent<Props> {
             textboxClassName += ' textarea--has-labels';
         }
 
-        if (this.props.preview) {
-            return (
-                <div
-                    ref={this.wrapper}
-                    className='textarea-wrapper'
-                >
-                    <div
-                        tabIndex={this.props.tabIndex || 0}
-                        ref={this.preview}
-                        className={classNames('form-control custom-textarea textbox-preview-area', {'textarea--has-labels': this.props.hasLabels})}
-                        onKeyPress={this.props.onKeyPress}
-                        onKeyDown={this.handleKeyDown}
-                        onBlur={this.handleBlur}
-                    >
-                        <PostMarkdown
-                            message={this.props.value}
-                            mentionKeys={[]}
-                            channelId={this.props.channelId}
-                            imageProps={{hideUtilities: true}}
-                        />
-                    </div>
-                </div>
-            );
-        }
-
         return (
             <div
                 ref={this.wrapper}
-                className='textarea-wrapper'
+                className={classNames('textarea-wrapper', {'textarea-wrapper-preview': this.props.preview})}
             >
+                <div
+                    tabIndex={this.props.tabIndex || 0}
+                    ref={this.preview}
+                    className={classNames('form-control custom-textarea textbox-preview-area', {'textarea--has-labels': this.props.hasLabels})}
+                    onKeyPress={this.props.onKeyPress}
+                    onKeyDown={this.handleKeyDown}
+                    onBlur={this.handleBlur}
+                >
+                    <PostMarkdown
+                        message={this.props.value}
+                        mentionKeys={[]}
+                        channelId={this.props.channelId}
+                        imageProps={{hideUtilities: true}}
+                    />
+                </div>
                 <SuggestionBox
                     id={this.props.id}
                     ref={this.message}

webapp/channels/src/sass/components/_post.scss

@@ -70,6 +70,26 @@
     }
 }
 
+.textarea-wrapper.textarea-wrapper-preview {
+    .textbox-preview-area {
+        display: block;
+    }
+
+    .textbox-edit-area {
+        display: none;
+    }
+}
+
+.textarea-wrapper:not(.textarea-wrapper-preview) {
+    .textbox-preview-area {
+        display: none;
+    }
+
+    .textbox-edit-area {
+        display: block;
+    }
+}
+
 .help__format-text {
     display: inline-block;
     font-size: 0.85em;