diff --git a/src/shared/components/Chat/EditMessageInput/EditMessageInput.tsx b/src/shared/components/Chat/EditMessageInput/EditMessageInput.tsx index c8463bdf7..3ab21f89c 100644 --- 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(null); + const editorRef = useRef(null); const inputContainerRef = useRef(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 (
diff --git a/src/shared/ui-kit/TextEditor/BaseTextEditor.tsx b/src/shared/ui-kit/TextEditor/BaseTextEditor.tsx index f2b17918b..6eb3b7dde 100644 --- a/src/shared/ui-kit/TextEditor/BaseTextEditor.tsx +++ b/src/shared/ui-kit/TextEditor/BaseTextEditor.tsx @@ -170,9 +170,18 @@ const BaseTextEditor = forwardRef((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();