From 21789858c083b9c0a29cf44745b797b0d607d7a9 Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Wed, 15 Apr 2020 15:21:53 -0500
Subject: [PATCH] Expand compose form clickable area

---
 .../features/compose/components/compose_form.js     | 11 +++++++++--
 app/gabsocial/pages/home_page.js                    | 13 +++++++++++--
 2 files changed, 20 insertions(+), 4 deletions(-)

diff --git a/app/gabsocial/features/compose/components/compose_form.js b/app/gabsocial/features/compose/components/compose_form.js
index 0ace5a0f1..8b78cdd6b 100644
--- a/app/gabsocial/features/compose/components/compose_form.js
+++ b/app/gabsocial/features/compose/components/compose_form.js
@@ -77,6 +77,7 @@ class ComposeForm extends ImmutablePureComponent {
     autoFocus: PropTypes.bool,
     group: ImmutablePropTypes.map,
     isModalOpen: PropTypes.bool,
+    clickableAreaRef: PropTypes.object,
   };
 
   static defaultProps = {
@@ -99,9 +100,15 @@ class ComposeForm extends ImmutablePureComponent {
     }
   }
 
+  getClickableArea = () => {
+    const { clickableAreaRef } = this.props;
+    return clickableAreaRef ? clickableAreaRef.current : this.form;
+  }
+
   handleClick = (e) => {
-    if (!this.form) return;
-    if (!this.form.contains(e.target)) {
+    const clickableArea = this.getClickableArea();
+    if (!clickableArea) return;
+    if (!clickableArea.contains(e.target)) {
       this.handleClickOutside();
     }
   }
diff --git a/app/gabsocial/pages/home_page.js b/app/gabsocial/pages/home_page.js
index f02e46e6b..4fcb2d865 100644
--- a/app/gabsocial/pages/home_page.js
+++ b/app/gabsocial/pages/home_page.js
@@ -22,6 +22,11 @@ const mapStateToProps = state => {
 export default @connect(mapStateToProps)
 class HomePage extends ImmutablePureComponent {
 
+  constructor(props) {
+    super(props);
+    this.composeBlock = React.createRef();
+  }
+
   render() {
     const { children, account, hasPatron } = this.props;
 
@@ -41,11 +46,15 @@ class HomePage extends ImmutablePureComponent {
 
             <div className='columns-area__panels__main'>
               <div className='columns-area columns-area--mobile'>
-                <div className='timeline-compose-block'>
+                <div className='timeline-compose-block' ref={this.composeBlock}>
                   <div className='timeline-compose-block__avatar'>
                     <Avatar account={account} size={46} />
                   </div>
-                  <ComposeFormContainer shouldCondense autoFocus={false} />
+                  <ComposeFormContainer
+                    shouldCondense
+                    autoFocus={false}
+                    clickableAreaRef={this.composeBlock}
+                  />
                 </div>
 
                 {children}