Message List: Fix incorrect focus position when containing blockquotes (#5363)

src/components/common/Blockquote.module.scss

@@ -5,14 +5,18 @@
   width: 100%;
 }
 
-.collapsed {
+.collapsed .blockquote {
-  @include mixins.gradient-border-bottom(1rem);
+  max-height: 4lh;
 }
 
 .gradientContainer {
   margin-top: 0.125rem;
   margin-bottom: 0.125rem;
   max-height: inherit;
+
+  .collapsed & {
+    @include mixins.gradient-border-bottom(1rem);
+  }
 }
 
 .collapseIcon {

src/components/common/Blockquote.tsx

@@ -40,12 +40,16 @@ const Blockquote = ({ canBeCollapsible, isToggleDisabled, children }: OwnProps)
   });
 
   return (
-    <span className={styles.root} onClick={canExpand ? handleExpand : undefined}>
+    <span
+      className={buildClassName(styles.root, isCollapsed && styles.collapsed)}
+      onClick={canExpand ? handleExpand : undefined}
+    >
       <blockquote
+        className={styles.blockquote}
         ref={ref}
         data-entity-type={ApiMessageEntityTypes.Blockquote}
       >
-        <div className={buildClassName(styles.gradientContainer, isCollapsed && styles.collapsed)}>
+        <div className={styles.gradientContainer}>
           {children}
         </div>
         {isCollapsible && (

src/components/middle/ActionMessage.tsx

@@ -136,7 +136,14 @@ const ActionMessage: FC<OwnProps & StateProps> = ({
     message.replyInfo?.type === 'message' ? message.replyInfo.replyToMsgId : undefined,
     targetMessage,
   );
-  useFocusMessage(ref, message.chatId, isFocused, focusDirection, noFocusHighlight, isJustAdded);
+  useFocusMessage({
+    elementRef: ref,
+    chatId: message.chatId,
+    isFocused,
+    focusDirection,
+    noFocusHighlight,
+    isJustAdded,
+  });
 
   useUnmountCleanup(() => {
     if (message.isPinned) {

src/components/middle/message/Message.tsx

@@ -832,17 +832,17 @@ const Message: FC<OwnProps & StateProps> = ({
     replyStory,
   );
 
-  useFocusMessage(
+  useFocusMessage({
-    ref,
+    elementRef: ref,
     chatId,
     isFocused,
     focusDirection,
     noFocusHighlight,
     isResizingContainer,
     isJustAdded,
-    Boolean(focusedQuote),
+    isQuote: Boolean(focusedQuote),
     scrollTargetPosition,
-  );
+  });
 
   const viaBusinessBotTitle = viaBusinessBot ? getPeerTitle(lang, viaBusinessBot) : undefined;
 

src/components/middle/message/hooks/useFocusMessage.ts

@@ -14,17 +14,27 @@ const BOTTOM_FOCUS_OFFSET = 500;
 const RELOCATED_FOCUS_OFFSET = SCROLL_MAX_DISTANCE;
 const FOCUS_MARGIN = 20;
 
-export default function useFocusMessage(
+export default function useFocusMessage({
-  elementRef: { current: HTMLDivElement | null },
+  elementRef,
-  chatId: string,
+  chatId,
-  isFocused?: boolean,
+  isFocused,
-  focusDirection?: FocusDirection,
+  focusDirection,
-  noFocusHighlight?: boolean,
+  noFocusHighlight,
-  isResizingContainer?: boolean,
+  isResizingContainer,
-  isJustAdded?: boolean,
+  isJustAdded,
-  isQuote?: boolean,
+  isQuote,
-  scrollTargetPosition?: ScrollTargetPosition,
+  scrollTargetPosition,
-) {
+}: {
+  elementRef: { current: HTMLDivElement | null };
+  chatId: string;
+  isFocused?: boolean;
+  focusDirection?: FocusDirection;
+  noFocusHighlight?: boolean;
+  isResizingContainer?: boolean;
+  isJustAdded?: boolean;
+  isQuote?: boolean;
+  scrollTargetPosition?: ScrollTargetPosition;
+}) {
   const isRelocatedRef = useRef(!isJustAdded);
 
   useLayoutEffect(() => {

src/hooks/element/useCollapsibleLines.ts

@@ -24,7 +24,7 @@ export default function useCollapsibleLines<T extends HTMLElement, C extends HTM
 
   useLayoutEffect(() => {
     const element = (cutoutRef || ref).current;
-    if (isDisabled || !element) return;
+    if (isDisabled || !element || isFirstRenderRef.current) return;
 
     requestMutation(() => {
       element.style.maxHeight = isCollapsed ? `${cutoutHeightRef.current}px` : '';