mirror of
https://github.com/docmost/docmost.git
synced 2026-06-22 09:01:37 +10:00
fix focus
This commit is contained in:
@@ -1,4 +1,4 @@
|
||||
import { useEffect, useRef, useState } from "react";
|
||||
import { useEffect, useState } from "react";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { IBaseProperty, IBaseRow } from "@/ee/base/types/base.types";
|
||||
import { timeAgo } from "@/lib/time.ts";
|
||||
@@ -24,29 +24,21 @@ export function RowDetailTitle({
|
||||
? (((row.cells ?? {})[primaryProperty.id] as string) ?? "")
|
||||
: "";
|
||||
const [value, setValue] = useState(initial);
|
||||
const inputRef = useRef<HTMLInputElement>(null);
|
||||
const didAutofocusRef = useRef(false);
|
||||
|
||||
// Re-sync when the row changes underneath us (navigation or remote edit).
|
||||
useEffect(() => {
|
||||
setValue(initial);
|
||||
}, [initial]);
|
||||
|
||||
useEffect(() => {
|
||||
if (didAutofocusRef.current || !canEdit || initial) return;
|
||||
didAutofocusRef.current = true;
|
||||
inputRef.current?.focus();
|
||||
}, [canEdit, initial]);
|
||||
|
||||
const updatedAgo = row.updatedAt ? timeAgo(new Date(row.updatedAt)) : "";
|
||||
|
||||
return (
|
||||
<header className={classes.header}>
|
||||
{canEdit ? (
|
||||
<input
|
||||
ref={inputRef}
|
||||
type="text"
|
||||
className={classes.titleInput}
|
||||
{...(!initial ? { "data-autofocus": true } : {})}
|
||||
placeholder={t("Untitled")}
|
||||
aria-label={primaryProperty?.name ?? t("Untitled")}
|
||||
value={value}
|
||||
|
||||
Reference in New Issue
Block a user