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