Fix compose form behavior in mobile view (#15555)

* Fix ComposeForm being mounted twice in mobile view

Fixes #13094

* Fix compose form focus and pre-selection behavior in mobile view

* Split _updateFocusAndSelection out of componentDidUpdate

2 files changed, 27 insertions, 2 deletions

diff --git a/app/javascript/mastodon/features/compose/components/compose_form.js b/app/javascript/mastodon/features/compose/components/compose_form.js
index 8af806ec4..ba2d20cc7 100644
--- a/app/javascript/mastodon/features/compose/components/compose_form.js
+++ b/app/javascript/mastodon/features/compose/components/compose_form.js
@@ -132,7 +132,15 @@ class ComposeForm extends ImmutablePureComponent {
     }
   }
 
+  componentDidMount () {
+    this._updateFocusAndSelection({ });
+  }
+
   componentDidUpdate (prevProps) {
+    this._updateFocusAndSelection(prevProps);
+  }
+
+  _updateFocusAndSelection = (prevProps) => {
     // This statement does several things:
     // - If we're beginning a reply, and,
     //     - Replying to zero or one users, places the cursor at the end of the textbox.
diff --git a/app/javascript/mastodon/features/ui/components/columns_area.js b/app/javascript/mastodon/features/ui/components/columns_area.js
index 6837450eb..85a92fc3a 100644
--- a/app/javascript/mastodon/features/ui/components/columns_area.js
+++ b/app/javascript/mastodon/features/ui/components/columns_area.js
@@ -70,8 +70,12 @@ class ColumnsArea extends ImmutablePureComponent {
     children: PropTypes.node,
   };
 
+   // Corresponds to (max-width: 600px + (285px * 1) + (10px * 1)) in SCSS
+   mediaQuery = 'matchMedia' in window && window.matchMedia('(max-width: 895px)');
+
   state = {
     shouldAnimate: false,
+    renderComposePanel: !(this.mediaQuery && this.mediaQuery.matches),
   }
 
   componentWillReceiveProps() {
@@ -85,6 +89,11 @@ class ColumnsArea extends ImmutablePureComponent {
       this.node.addEventListener('wheel', this.handleWheel, supportsPassiveEvents ? { passive: true } : false);
     }
 
+    if (this.mediaQuery) {
+      this.mediaQuery.addEventListener('change', this.handleLayoutChange);
+      this.setState({ renderComposePanel: !this.mediaQuery.matches });
+    }
+
     this.lastIndex   = getIndex(this.context.router.history.location.pathname);
     this.isRtlLayout = document.getElementsByTagName('body')[0].classList.contains('rtl');
 
@@ -114,6 +123,10 @@ class ColumnsArea extends ImmutablePureComponent {
     if (!this.props.singleColumn) {
       this.node.removeEventListener('wheel', this.handleWheel);
     }
+
+    if (this.mediaQuery) {
+      this.mediaQuery.removeEventListener('change', this.handleLayoutChange);
+    }
   }
 
   handleChildrenContentChange() {
@@ -123,6 +136,10 @@ class ColumnsArea extends ImmutablePureComponent {
     }
   }
 
+  handleLayoutChange = (e) => {
+    this.setState({ renderComposePanel: !e.matches });
+  }
+
   handleSwipe = (index) => {
     this.pendingIndex = index;
 
@@ -186,7 +203,7 @@ class ColumnsArea extends ImmutablePureComponent {
 
   render () {
     const { columns, children, singleColumn, isModalOpen, intl } = this.props;
-    const { shouldAnimate } = this.state;
+    const { shouldAnimate, renderComposePanel } = this.state;
 
     const columnIndex = getIndex(this.context.router.history.location.pathname);
 
@@ -205,7 +222,7 @@ class ColumnsArea extends ImmutablePureComponent {
         <div className='columns-area__panels'>
           <div className='columns-area__panels__pane columns-area__panels__pane--compositional'>
             <div className='columns-area__panels__pane__inner'>
-              <ComposePanel />
+              {renderComposePanel && <ComposePanel />}
             </div>
           </div>