Fix: Event leakage issues (#80)

* Block scrolling of body tag when pop-up components appear
* Prevent unexpected scrolling when fetching messages
* Add sample case for when chat app is smaller than the page size

[UIKIT-1461](https://sendbird.atlassian.net/browse/UIKIT-1461)
[UIKIT-1467](https://sendbird.atlassian.net/browse/UIKIT-1467)

Author: HoonBaek

src/smart-components/App/stories/index.stories.js

@@ -379,6 +379,24 @@ const CustomApp = () => {
 
 export const customer1 = () => fitPageSize(<CustomApp />);
 
+export const customer2 = () => (
+  <div style={{ height: '2000px', width: '100vw', backgroundColor: 'gray', position: 'relative', display: 'flex', justifyContent: 'center'}}>
+    <div style={{ height: '100vh', width: '90vw', position: 'relative', top: '200px' }}>
+      <App
+        appId={appId}
+        userId={array[0]}
+        nickname={array[0]}
+        profileUrl={addProfile}
+        showSearchIcon
+        allowProfileEdit
+        config={{ logLevel: 'all' }}
+        queries={{}}
+        replyType="QUOTE_REPLY"
+      />
+    </div>
+  </div>
+);
+
 export const disableUserProfile = () => fitPageSize(
   <App
     showSearchIcon

src/smart-components/Conversation/components/ConversationScroll.jsx

@@ -55,8 +55,9 @@ export default class ConversationScroll extends Component {
       onScroll(([messages]) => {
         if (messages) {
           // https://github.com/scabbiaza/react-scroll-position-on-updating-dom
+          // Set block to nearest to prevent unexpected scrolling from outer components
           try {
-            first.scrollIntoView();
+            first.scrollIntoView({ block: 'nearest' });
           } catch (error) {
             //
           }
@@ -71,7 +72,7 @@ export default class ConversationScroll extends Component {
         if (messages) {
           // https://github.com/scabbiaza/react-scroll-position-on-updating-dom
           try {
-            last.scrollIntoView();
+            last.scrollIntoView({ block: 'nearest' });
           } catch (error) {
             //
           }

src/ui/ContextMenu/index.scss

@@ -1,5 +1,10 @@
 @import '../../styles/variables';
 
+body.sendbird-emoji-list-pop-up,
+body.sendbird-menu-items-pop-up {
+  overflow: hidden !important;
+}
+
 .sendbird__offline {
   .sendbird-dropdown__menu .sendbird-dropdown__menu-item {
     cursor: not-allowed;

src/ui/ContextMenu/items/EmojiListItems.jsx

@@ -4,10 +4,13 @@ import PropTypes from 'prop-types';
 
 import SortByRow from '../../SortByRow';
 
+const EMOJI_LIST_POP_UP = 'sendbird-emoji-list-pop-up';
+
 export default class EmojiListItems extends Component {
   constructor(props) {
     super(props);
     this.reactionRef = React.createRef();
+    this.rootForPopup = document.body;
     this.state = {
       reactionStyle: {},
       handleClickOutside: () => { },
@@ -18,11 +21,15 @@ export default class EmojiListItems extends Component {
     this.setupEvents();
     this.getBarPosition();
     this.showParent();
+    // add className to body
+    this.rootForPopup.className = `${EMOJI_LIST_POP_UP} ${this.rootForPopup.className}`;
   }
 
   componentWillUnmount() {
     this.cleanUpEvents();
     this.hideParent();
+    // remove className from body
+    this.rootForPopup.className = this.rootForPopup.className.split(' ').filter((className) => className !== EMOJI_LIST_POP_UP).join(' ');
   }
 
   showParent = () => {

src/ui/ContextMenu/items/MenuItems.jsx

@@ -2,10 +2,13 @@ import React, { Component } from 'react';
 import { createPortal } from 'react-dom';
 import PropTypes from 'prop-types';
 
+const MENU_ITEMS_POP_UP = 'sendbird-menu-items-pop-up';
+
 export default class MenuItems extends Component {
   constructor(props) {
     super(props);
     this.menuRef = React.createRef();
+    this.rootForPopup = document.body;
     this.state = {
       menuStyle: {},
       handleClickOutside: () => { },
@@ -16,11 +19,15 @@ export default class MenuItems extends Component {
     this.setupEvents();
     this.getMenuPosition();
     this.showParent();
+    // add className to body
+    this.rootForPopup.className = `${MENU_ITEMS_POP_UP} ${this.rootForPopup.className}`;
   }
 
   componentWillUnmount() {
     this.cleanUpEvents();
     this.hideParent();
+    // remove className from body
+    this.rootForPopup.className = this.rootForPopup.className.split(' ').filter((className) => className !== MENU_ITEMS_POP_UP).join(' ');
   }
 
   showParent = () => {

src/ui/Modal/index.jsx

@@ -1,4 +1,4 @@
-import React, { useContext } from 'react';
+import React, { useContext, useEffect } from 'react';
 import PropTypes from 'prop-types';
 import { createPortal } from 'react-dom';
 
@@ -80,6 +80,14 @@ export default function Modal(props) {
     hideFooter,
     type,
   } = props;
+  const { body } = document;
+  useEffect(() => {
+    body.className = `sendbird-modal-pop-up ${body.className}`;
+    return () => {
+      body.className = body.className.split(' ').filter((className) => className !== 'sendbird-modal-pop-up').join(' ');
+    };
+  }, []);
+
   return createPortal((
     <div className="sendbird-modal">
       <div className="sendbird-modal__content">

src/ui/Modal/index.scss

@@ -61,3 +61,7 @@
     background-color: t(overlay-2);
   }
 }
+
+body.sendbird-modal-pop-up {
+  overflow: hidden !important;
+}