Reactions keep list at bottom

GetStream · Feb 24, 2021 · b52d973 · b52d973
1 parent 7d5efb7
commit b52d973
Show file tree

Hide file tree

Showing 3 changed files with 25 additions and 14 deletions.
diff --git a/package.json b/package.json
@@ -42,7 +42,7 @@
     "react-markdown": "^5.0.3",
     "react-player": "^2.7.0",
     "react-textarea-autosize": "^8.3.0",
-    "react-virtuoso": "^1.5.8",
+    "react-virtuoso": "1.5.9",
     "textarea-caret": "^3.1.0",
     "uuid": "^8.3.1"
   },

diff --git a/src/components/MessageList/VirtualizedMessageList.js b/src/components/MessageList/VirtualizedMessageList.js
@@ -113,11 +113,19 @@ const VirtualizedMessageList = ({
       );
 
     /**
-     * setting 'overflow: auto' traps CSS margins of the item elements, preventing incorrect item measurements.
+     * using 'display: inline-block' traps CSS margins of the item elements, preventing incorrect item measurements.
      * @type {import('react-virtuoso').Components['Item']}
      */
     const Item = (props) => {
-      return <div {...props} style={{ overflow: 'auto' }} />;
+      return (
+        <div
+          {...props}
+          style={{
+            display: 'inline-block',
+            width: '100%',
+          }}
+        />
+      );
     };
 
     const Footer = () => {
@@ -143,14 +151,17 @@ const VirtualizedMessageList = ({
         ref={virtuoso}
         totalCount={messages.length}
         overscan={overscan}
+        style={{ overflowX: 'hidden' }}
         followOutput={(isAtBottom) => {
           if (shouldForceScrollToBottom()) {
             return isAtBottom ? stickToBottomScrollBehavior : 'auto';
           }
           // a message from another user has been received - don't scroll to bottom unless already there
           return isAtBottom ? stickToBottomScrollBehavior : false;
         }}
-        itemContent={(i) => messageRenderer(messages, i)}
+        itemContent={(i) => {
+          return messageRenderer(messages, i);
+        }}
         components={virtuosoComponents}
         firstItemIndex={PREPEND_OFFSET - numItemsPrepended}
         startReached={() => {

diff --git a/yarn.lock b/yarn.lock
@@ -9907,6 +9907,16 @@ react-view-pager@^0.6.0:
     resize-observer-polyfill "1.5.0"
     tabbable "1.1.2"
 
+[email protected]:
+  version "1.5.9"
+  resolved "https://registry.yarnpkg.com/react-virtuoso/-/react-virtuoso-1.5.9.tgz#1c64d093df7c67c07ca3813780e2c65cf07d5efa"
+  integrity sha512-r3nE98ElMWtI9rtLlPT5iVcN/cwkm1dyDXVdJ1LVdoVPGhiyTa4yTIgLR8AEiU8s65BvCcl50efEPVVqf+5MsA==
+  dependencies:
+    "@virtuoso.dev/react-urx" "^0.2.5"
+    "@virtuoso.dev/urx" "^0.2.5"
+    react-app-polyfill "^1.0.6"
+    resize-observer-polyfill "^1.5.1"
+
 react-virtuoso@^0.20.3:
   version "0.20.3"
   resolved "https://registry.yarnpkg.com/react-virtuoso/-/react-virtuoso-0.20.3.tgz#dde89d9d84f10a029ddbe61ac22fa416b51e0119"
@@ -9915,16 +9925,6 @@ react-virtuoso@^0.20.3:
     resize-observer-polyfill "^1.5.1"
     tslib "^1.11.1"
 
-react-virtuoso@^1.5.8:
-  version "1.5.8"
-  resolved "https://registry.yarnpkg.com/react-virtuoso/-/react-virtuoso-1.5.8.tgz#137d4dc5ee82e55302f39c73479f2d1d7e2a10cd"
-  integrity sha512-GPLkT+PrP5mwLFgsUJcCmmc63Gw05cbGh4jvzGQu0jWqWUKFzNn0O0JvTEOIScQ65o2JV9Dxoz5ZLNtwyNgw5w==
-  dependencies:
-    "@virtuoso.dev/react-urx" "^0.2.5"
-    "@virtuoso.dev/urx" "^0.2.5"
-    react-app-polyfill "^1.0.6"
-    resize-observer-polyfill "^1.5.1"
-
 react@^16.2.0:
   version "16.14.0"
   resolved "https://registry.yarnpkg.com/react/-/react-16.14.0.tgz#94d776ddd0aaa37da3eda8fc5b6b18a4c9a3114d"