fixes

ui/component/common/form-components/form-field.jsx

@@ -78,17 +78,10 @@ export class FormField extends React.PureComponent<Props, State> {
   }
 
   componentDidMount() {
-    const { autoFocus } = this.props;
+    const { autoFocus, showSelectors, slimInput } = this.props;
     const input = this.input.current;
 
     if (input && autoFocus) input.focus();
-  }
-
-  componentDidUpdate() {
-    const { showSelectors, slimInput } = this.props;
-    const input = this.input.current;
-
-    // Opened selectors (emoji/sticker) -> blur input and hide keyboard
     if (slimInput && showSelectors && showSelectors.open && input) input.blur();
   }
 
@@ -267,16 +260,17 @@ export class FormField extends React.PureComponent<Props, State> {
             </div>
           );
         case 'textarea':
+          const closeSelector =
+            setShowSelectors && showSelectors
+              ? () => setShowSelectors({ tab: showSelectors.tab || undefined, open: false })
+              : () => {};
+
           return (
             <fieldset-section>
               <TextareaWrapper
                 isDrawerOpen={Boolean(this.state.drawerOpen)}
                 toggleDrawer={() => this.setState({ drawerOpen: !this.state.drawerOpen })}
-                closeSelector={
+                closeSelector={closeSelector}
-                  setShowSelectors && showSelectors
-                    ? () => setShowSelectors({ tab: showSelectors.tab || undefined, open: false })
-                    : () => {}
-                }
                 commentSelectorsProps={commentSelectorsProps}
                 showSelectors={Boolean(showSelectors && showSelectors.open)}
                 slimInput={slimInput}
@@ -319,6 +313,7 @@ export class FormField extends React.PureComponent<Props, State> {
                       handleSubmit={() => {
                         if (handleSubmit) handleSubmit();
                         if (slimInput) this.setState({ drawerOpen: false });
+                        closeSelector();
                       }}
                       claimIsMine={commentSelectorsProps && commentSelectorsProps.claimIsMine}
                       {...inputProps}

ui/component/livestreamChatLayout/view.jsx

@@ -73,6 +73,7 @@ export default function LivestreamChatLayout(props: Props) {
   const discussionElement = isMobile ? mobileElement : webElement;
   const allCommentsElem = document.querySelectorAll('.livestream__comment');
   const lastCommentElem = allCommentsElem && allCommentsElem[allCommentsElem.length - 1];
+  const secondLastCommentElem = allCommentsElem && allCommentsElem[allCommentsElem.length - 2];
 
   const [viewMode, setViewMode] = React.useState(VIEW_MODES.CHAT);
   const [scrollPos, setScrollPos] = React.useState(0);
@@ -155,7 +156,12 @@ export default function LivestreamChatLayout(props: Props) {
         }
 
         if (isMobile) {
-          const pos = lastCommentElem && bottomScrollTop - lastCommentElem.getBoundingClientRect().height;
+          const pos =
+            lastCommentElem &&
+            secondLastCommentElem &&
+            bottomScrollTop -
+              lastCommentElem.getBoundingClientRect().height -
+              secondLastCommentElem.getBoundingClientRect().height;
 
           if (!minScrollHeight || minScrollHeight !== pos) {
             setMinScrollHeight(pos);
@@ -168,7 +174,15 @@ export default function LivestreamChatLayout(props: Props) {
       discussionElement.addEventListener('scroll', handleScroll);
       return () => discussionElement.removeEventListener('scroll', handleScroll);
     }
-  }, [bottomScrollTop, discussionElement, isMobile, lastCommentElem, minScrollHeight, scrollPos]);
+  }, [
+    bottomScrollTop,
+    discussionElement,
+    isMobile,
+    lastCommentElem,
+    secondLastCommentElem,
+    minScrollHeight,
+    scrollPos,
+  ]);
 
   // Retain scrollPos=0 when receiving new messages.
   React.useEffect(() => {
@@ -260,7 +274,7 @@ export default function LivestreamChatLayout(props: Props) {
       </div>
     );
   }
-  console.log(hasRecentComments);
+
   return (
     <div className={classnames('card livestream__chat', { 'livestream__chat--popout': isPopoutWindow })}>
       {!hideHeader && (
@@ -353,7 +367,7 @@ export default function LivestreamChatLayout(props: Props) {
             uri={uri}
             commentsToDisplay={commentsToDisplay}
             isMobile={isMobile}
-            restoreScrollPos={!hasRecentComments && restoreScrollPos}
+            restoreScrollPos={!hasRecentComments && isMobile && restoreScrollPos}
           />
         )}