Fix reply message editor scrolling from wrong direction

espoon-voltti · Oct 3, 2024 · b59371f · b59371f
1 parent 117bc0c
commit b59371f
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 2 deletions.
diff --git a/frontend/src/lib-components/atoms/form/TextArea.tsx b/frontend/src/lib-components/atoms/form/TextArea.tsx
@@ -25,6 +25,7 @@ interface TextAreaInputProps extends BaseProps {
   maxLength?: number
   type?: string
   autoFocus?: boolean
+  autoFocusDelayMs?: number
   placeholder?: string
   info?: InputInfo
   align?: 'left' | 'right'
@@ -48,6 +49,7 @@ const TextArea = React.memo(function TextArea({
   maxLength,
   type,
   autoFocus,
+  autoFocusDelayMs,
   placeholder,
   info,
   id,
@@ -90,6 +92,7 @@ const TextArea = React.memo(function TextArea({
         maxLength={maxLength}
         type={type}
         autoFocus={autoFocus}
+        autoFocusDelayMs={autoFocusDelayMs}
         className={classNames(className, infoStatus)}
         data-qa={dataQa}
         id={id}
@@ -136,11 +139,17 @@ export const TextAreaF = React.memo(function TextAreaF({
   )
 })
 
+interface TextAreaAutosizeProps extends React.HTMLProps<HTMLTextAreaElement> {
+  autoFocusDelayMs?: number
+}
+
 const TextareaAutosize = React.memo(function TextAreaAutosize({
   rows = 1,
   ...props
-}: React.HTMLProps<HTMLTextAreaElement>) {
+}: TextAreaAutosizeProps) {
   const textarea = useRef<HTMLTextAreaElement | null>(null)
+  const { autoFocus, autoFocusDelayMs, ...textAreaProps } = props
+  const immediateAutoFocus = autoFocus && (autoFocusDelayMs ?? 0) <= 0
 
   useEffect(() => {
     const el = textarea.current
@@ -156,8 +165,21 @@ const TextareaAutosize = React.memo(function TextAreaAutosize({
     if (textarea.current) autosize.update(textarea.current)
   })
 
+  useEffect(() => {
+    if (autoFocus && (autoFocusDelayMs ?? 0 > 0)) {
+      setTimeout(() => {
+        textarea.current?.focus()
+      }, autoFocusDelayMs)
+    }
+  }, [autoFocus, autoFocusDelayMs])
+
   return (
-    <textarea {...props} rows={rows} ref={textarea}>
+    <textarea
+      {...textAreaProps}
+      rows={rows}
+      ref={textarea}
+      autoFocus={immediateAutoFocus}
+    >
       {props.children}
     </textarea>
   )

diff --git a/frontend/src/lib-components/messages/MessageReplyEditor.tsx b/frontend/src/lib-components/messages/MessageReplyEditor.tsx
@@ -102,6 +102,7 @@ function MessageReplyEditor<T, R>({
           onChange={(value) => onUpdateContent(value)}
           data-qa="message-reply-content"
           autoFocus
+          autoFocusDelayMs={200}
         />
       </EditorRow>
       <EditorRow>