Fix tooltip weird behavior in editable titles (#1268)
This commit is contained in:
@@ -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}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user