Expand compose form clickable area

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;
+    const clickableArea = this.getClickableArea();
-    if (!this.form.contains(e.target)) {
+    if (!clickableArea) return;
+    if (!clickableArea.contains(e.target)) {
       this.handleClickOutside();
     }
   }

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}