diff --git a/app/scenes/Document/components/DocumentTitle.tsx b/app/scenes/Document/components/DocumentTitle.tsx index f22cdec72..0b109be2a 100644 --- a/app/scenes/Document/components/DocumentTitle.tsx +++ b/app/scenes/Document/components/DocumentTitle.tsx @@ -3,6 +3,7 @@ import { Slice } from "prosemirror-model"; import { Selection } from "prosemirror-state"; import { __parseFromClipboard } from "prosemirror-view"; import * as React from "react"; +import { mergeRefs } from "react-merge-refs"; import styled from "styled-components"; import breakpoint from "styled-components-breakpoint"; import isMarkdown from "@shared/editor/lib/isMarkdown"; @@ -64,8 +65,9 @@ const DocumentTitle = React.forwardRef(function _DocumentTitle( onBlur, placeholder, }: Props, - ref: React.RefObject + externalRef: React.RefObject ) { + const ref = React.useRef(null); const [emojiPickerIsOpen, handleOpen, handleClose] = useBoolean(); const { editor } = useDocumentContext(); @@ -147,13 +149,13 @@ const DocumentTitle = React.forwardRef(function _DocumentTitle( if (/\/date\s$/.test(value)) { title = getCurrentDateAsString(); - ref.current?.focusAtEnd(); + ref?.current?.focusAtEnd(); } else if (/\/time$/.test(value)) { title = getCurrentTimeAsString(); - ref.current?.focusAtEnd(); + ref?.current?.focusAtEnd(); } else if (/\/datetime$/.test(value)) { title = getCurrentDateTimeAsString(); - ref.current?.focusAtEnd(); + ref?.current?.focusAtEnd(); } onChangeTitle?.(title); @@ -249,7 +251,7 @@ const DocumentTitle = React.forwardRef(function _DocumentTitle( maxLength={DocumentValidation.maxTitleLength} readOnly={readOnly} dir="auto" - ref={ref} + ref={mergeRefs([ref, externalRef])} > {can.update && !readOnly ? (