PLT-3094 - Fixing autocomplete and image modal scrolling on mobile (#3279)

webapp/components/suggestion/suggestion_box.jsx

@@ -31,7 +31,7 @@ export default class SuggestionBox extends React.Component {
     }
 
     componentDidMount() {
-        $(document).on('click', this.handleDocumentClick);
+        $(document).on('click touchstart', this.handleDocumentClick);
 
         SuggestionStore.addCompleteWordListener(this.suggestionId, this.handleCompleteWord);
         SuggestionStore.addPretextChangedListener(this.suggestionId, this.handlePretextChanged);
@@ -42,7 +42,7 @@ export default class SuggestionBox extends React.Component {
         SuggestionStore.removePretextChangedListener(this.suggestionId, this.handlePretextChanged);
 
         SuggestionStore.unregisterSuggestionBox(this.suggestionId);
-        $(document).off('click', this.handleDocumentClick);
+        $(document).off('click touchstart', this.handleDocumentClick);
     }
 
     getTextbox() {
@@ -58,6 +58,11 @@ export default class SuggestionBox extends React.Component {
 
     handleDocumentClick(e) {
         const container = $(ReactDOM.findDOMNode(this));
+        if ($('.suggestion-list__content').length) {
+            if (!($(e.target).hasClass('suggestion-list__content') || $(e.target).parents().hasClass('suggestion-list__content'))) {
+                $('body').removeClass('modal-open');
+            }
+        }
         if (!(container.is(e.target) || container.has(e.target).length > 0)) {
             // we can't just use blur for this because it fires and hides the children before
             // their click handlers can be called

webapp/components/suggestion/suggestion_list.jsx

@@ -51,6 +51,7 @@ export default class SuggestionList extends React.Component {
     }
 
     getContent() {
+        $('body').addClass('modal-open');
         return $(ReactDOM.findDOMNode(this.refs.content));
     }
 

webapp/sass/layout/_post.scss

@@ -258,10 +258,6 @@ body.ios {
         position: absolute;
         width: 100%;
 
-        .modal-open & {
-            @include clearfix;
-        }
-
         &.active {
             display: inline;
         }

webapp/sass/responsive/_mobile.scss

@@ -1,6 +1,14 @@
 @charset 'UTF-8';
 
 @media screen and (max-width: 768px) {
+    #post-list {
+        .post-list-holder-by-time {
+            .modal-open & {
+                @include clearfix;
+            }
+        }
+    }
+
     .post-code__language {
         @include opacity(.6);
         @include transition(none);