Dockery/Trilium
1
0
Fork 0
mirror of https://github.com/zadam/trilium.git synced 2025-10-29 17:26:38 +01:00
Code Issues Packages Projects Releases Activity

feat(react/collections/board): flickerless add new item

Browse Source
This commit is contained in:
Elian Doran
2025-09-13 09:13:41 +03:00
parent d908a1b0d2
commit 220858926f
1 changed files with 13 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
apps/client/src/widgets/collections/board/index.tsx
View File

@@ -7,7 +7,7 @@ import Icon from "../../react/Icon";
import { t } from "../../../services/i18n"; import { t } from "../../../services/i18n";
import Api from "./api"; import Api from "./api";
import FormTextBox from "../../react/FormTextBox"; import FormTextBox from "../../react/FormTextBox";
import { createContext } from "preact"; import { createContext, JSX } from "preact";
import { onWheelHorizontalScroll } from "../../widget_utils"; import { onWheelHorizontalScroll } from "../../widget_utils";
import Column from "./column"; import Column from "./column";
import BoardApi from "./api"; import BoardApi from "./api";
@@ -225,6 +225,7 @@ export function TitleEditor({ currentValue, placeholder, save, dismiss, multilin
isNewItem?: boolean; isNewItem?: boolean;
}) { }) {
const inputRef = useRef<any>(null); const inputRef = useRef<any>(null);
const dismissOnNextRefreshRef = useRef(false);
useEffect(() => { useEffect(() => {
inputRef.current?.focus(); inputRef.current?.focus();
@@ -233,19 +234,26 @@ export function TitleEditor({ currentValue, placeholder, save, dismiss, multilin
const Element = multiline ? FormTextArea : FormTextBox; const Element = multiline ? FormTextArea : FormTextBox;
useEffect(() => {
if (dismissOnNextRefreshRef.current) {
dismiss();
dismissOnNextRefreshRef.current = false;
}
});
return ( return (
<Element <Element
inputRef={inputRef} inputRef={inputRef}
currentValue={currentValue ?? ""} currentValue={currentValue ?? ""}
placeholder={placeholder} placeholder={placeholder}
rows={multiline ? 4 : undefined} rows={multiline ? 4 : undefined}
onKeyDown={(e) => { onKeyDown={(e: JSX.TargetedKeyboardEvent<HTMLInputElement | HTMLTextAreaElement>) => {
if (e.key === "Enter") { if (e.key === "Enter") {
const newValue = e.currentTarget.value; const newValue = e.currentTarget?.value;
if (newValue.trim() && (newValue !== currentValue || isNewItem)) { if (newValue.trim() && (newValue !== currentValue || isNewItem)) {
save(newValue); save(newValue);
dismissOnNextRefreshRef.current = true;
} }
dismiss();
} }
if (e.key === "Escape") { if (e.key === "Escape") {
@@ -255,8 +263,8 @@ export function TitleEditor({ currentValue, placeholder, save, dismiss, multilin
onBlur={(newValue) => { onBlur={(newValue) => {
if (newValue.trim() && (newValue !== currentValue || isNewItem)) { if (newValue.trim() && (newValue !== currentValue || isNewItem)) {
save(newValue); save(newValue);
dismissOnNextRefreshRef.current = true;
} }
dismiss();
}} }}
/> />
); );