CW-instant-chat-message-edit

Added focus on open
daostack · Oct 11, 2024 · 94de9b9 · 94de9b9
1 parent 44eef1d
commit 94de9b9
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 2 deletions.
diff --git a/src/shared/components/Chat/EditMessageInput/EditMessageInput.tsx b/src/shared/components/Chat/EditMessageInput/EditMessageInput.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect, useMemo, useState, useRef } from "react";
+import React, { useEffect, useMemo, useState, useRef, useLayoutEffect } from "react";
 import classNames from "classnames";
 import { useCommonMembers } from "@/pages/OldCommon/hooks";
 import { Loader } from "@/shared/components";
@@ -13,6 +13,7 @@ import {
 import { parseStringToTextEditorValue } from "@/shared/ui-kit/TextEditor/utils";
 import { emptyFunction } from "@/shared/utils";
 import styles from "./EditMessageInput.module.scss";
+import { BaseTextEditorHandles } from "@/shared/ui-kit/TextEditor/BaseTextEditor";
 
 interface Props {
   discussionMessage: DiscussionMessage;
@@ -29,6 +30,8 @@ export default function EditMessageInput({
   isLoading,
   updateMessage,
 }: Props) {
+  const textInputRef = useRef<BaseTextEditorHandles>(null);
+  const editorRef = useRef<HTMLElement>(null);
   const inputContainerRef = useRef<HTMLDivElement>(null);
   const [message, setMessage] = useState(() =>
     parseStringToTextEditorValue(discussionMessage.text),
@@ -37,6 +40,10 @@ export default function EditMessageInput({
     commonId: discussionMessage.commonId,
   });
 
+  useLayoutEffect(() => {
+    textInputRef?.current?.focus?.();
+  },[discussionMessage]);
+
   const handleMessageUpdate = () => {
     updateMessage(message);
   };
@@ -56,6 +63,7 @@ export default function EditMessageInput({
   return (
     <div ref={inputContainerRef} className={styles.container}>
       <BaseTextEditor
+        ref={textInputRef}
         className={styles.input}
         emojiPickerContainerClassName={styles.pickerContainer}
         emojiContainerClassName={styles.emojiContainer}
@@ -66,6 +74,7 @@ export default function EditMessageInput({
         onClearFinished={emptyFunction}
         size={TextEditorSize.Auto}
         inputContainerRef={inputContainerRef}
+        editorRef={editorRef}
       />
 
       <div className={styles.buttonContainer}>

diff --git a/src/shared/ui-kit/TextEditor/BaseTextEditor.tsx b/src/shared/ui-kit/TextEditor/BaseTextEditor.tsx
@@ -170,9 +170,18 @@ const BaseTextEditor = forwardRef<BaseTextEditorHandles, TextEditorProps>((props
   useImperativeHandle(ref, () => ({
     focus: () => {
       if (editorRef) {
+        const end = EditorSlate.end(editor, []);
+
+        // Move the selection to the end
+        Transforms.select(editor, end);
+
+        // Focus the editor DOM node
         const editorEl = ReactEditor.toDOMNode(editor, editor);
         editorEl.focus();
-      }
+
+        // Ensure the editor itself is focused programmatically
+        ReactEditor.focus(editor);
+      } 
     },
     clear: () => {
       clearInput();