PLT-4459 Fixed not being able to scroll on mobile after autocomplete is shown (#4464)

* Fixed not being able to scroll on mobile after autocomplete is shown

* Fixed SuggestionLists not being scrollable on iOS

5 files changed, 10 insertions, 17 deletions

diff --git a/webapp/components/suggestion/suggestion_box.jsx b/webapp/components/suggestion/suggestion_box.jsx
index 21bfd3dc3..464e57ef2 100644
--- a/webapp/components/suggestion/suggestion_box.jsx
+++ b/webapp/components/suggestion/suggestion_box.jsx
@@ -31,7 +31,7 @@ export default class SuggestionBox extends React.Component {
     }
 
     componentDidMount() {
-        $(document).on('click touchstart', this.handleDocumentClick);
+        $(document).on('click', 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 touchstart', this.handleDocumentClick);
+        $(document).off('click', this.handleDocumentClick);
     }
 
     getTextbox() {
@@ -60,14 +60,14 @@ 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 (!SuggestionStore.hasSuggestions(this.suggestionId)) {
+            return;
         }
+
+        const container = $(ReactDOM.findDOMNode(this));
+
         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
+            // We can't just use blur for this because it fires and hides the children before
             // their click handlers can be called
             GlobalActions.emitClearSuggestions(this.suggestionId);
         }
diff --git a/webapp/components/suggestion/suggestion_list.jsx b/webapp/components/suggestion/suggestion_list.jsx
index 65311a582..0c2dbf784 100644
--- a/webapp/components/suggestion/suggestion_list.jsx
+++ b/webapp/components/suggestion/suggestion_list.jsx
@@ -52,7 +52,6 @@ export default class SuggestionList extends React.Component {
     }
 
     getContent() {
-        $('body').addClass('modal-open');
         return $(ReactDOM.findDOMNode(this.refs.content));
     }
 
diff --git a/webapp/sass/components/_popover.scss b/webapp/sass/components/_popover.scss
index 4ff72da55..408f0ffd0 100644
--- a/webapp/sass/components/_popover.scss
+++ b/webapp/sass/components/_popover.scss
@@ -79,6 +79,7 @@
         .popover-content {
             padding: 10px;
             position: relative;
+            -webkit-overflow-scrolling: touch;
         }
     }
 
diff --git a/webapp/sass/components/_suggestion-list.scss b/webapp/sass/components/_suggestion-list.scss
index 51f4d2b02..d4cd9ef05 100644
--- a/webapp/sass/components/_suggestion-list.scss
+++ b/webapp/sass/components/_suggestion-list.scss
@@ -19,6 +19,7 @@
     overflow-y: scroll;
     padding-bottom: 5px;
     width: 100%;
+    -webkit-overflow-scrolling: touch;
 
     .command {
         border-bottom: 1px solid $light-gray;
diff --git a/webapp/sass/responsive/_mobile.scss b/webapp/sass/responsive/_mobile.scss
index 7c13de1ba..d18295dc4 100644
--- a/webapp/sass/responsive/_mobile.scss
+++ b/webapp/sass/responsive/_mobile.scss
@@ -107,14 +107,6 @@
         margin-right: 0 !important;
     }
 
-    #post-list {
-        .post-list-holder-by-time {
-            .modal-open & {
-                @include clearfix;
-            }
-        }
-    }
-
     .post-code__language {
         @include opacity(.6);
         @include transition(none);