Fix tooltip weird behavior in editable titles (#1268)

This commit is contained in:
Shuchang Zheng
2024-11-26 08:49:25 -08:00
committed by GitHub
parent 38c42b6b48
commit 80f2d5ae96

View File

@@ -25,11 +25,11 @@ function EditableNodeTitle({
}: Props) {
const [editing, setEditing] = useState(false);
return (
<TooltipProvider>
<Tooltip>
<TooltipTrigger asChild>
{!editing ? (
if (!editing) {
return (
<TooltipProvider>
<Tooltip>
<TooltipTrigger asChild>
<h1
className={cn("cursor-text", titleClassName)}
onClick={() => {
@@ -38,41 +38,43 @@ function EditableNodeTitle({
>
{value}
</h1>
) : (
<HorizontallyResizingInput
disabled={!editable}
size={1}
autoFocus
className={cn("nopan w-min border-0 p-0", inputClassName)}
onBlur={(event) => {
if (!editable) {
event.currentTarget.value = value;
return;
}
if (event.currentTarget.value !== value) {
onChange(event.target.value);
}
setEditing(false);
}}
onKeyDown={(event) => {
if (!editable) {
return;
}
if (event.key === "Enter") {
event.currentTarget.blur();
}
if (event.key === "Escape") {
event.currentTarget.value = value;
event.currentTarget.blur();
}
}}
defaultValue={value}
/>
)}
</TooltipTrigger>
<TooltipContent>Click to edit</TooltipContent>
</Tooltip>
</TooltipProvider>
</TooltipTrigger>
<TooltipContent>Click to edit</TooltipContent>
</Tooltip>
</TooltipProvider>
);
}
return (
<HorizontallyResizingInput
disabled={!editable}
size={1}
autoFocus
className={cn("nopan w-min border-0 p-0", inputClassName)}
onBlur={(event) => {
if (!editable) {
event.currentTarget.value = value;
return;
}
if (event.currentTarget.value !== value) {
onChange(event.target.value);
}
setEditing(false);
}}
onKeyDown={(event) => {
if (!editable) {
return;
}
if (event.key === "Enter") {
event.currentTarget.blur();
}
if (event.key === "Escape") {
event.currentTarget.value = value;
event.currentTarget.blur();
}
}}
defaultValue={value}
/>
);
}