Textbox not entering "true" editing mode #10118
-
Not sure if this is a possible bug or its supposed to happen. const pointer = fabricCanvas.getScenePoint(o.e);
const text = new fabric.Textbox("Edit text", {
left: pointer.x,
top: pointer.y,
fontFamily: "Kalam",
fontSize: 20,
fill: "white",
editable: true,
selectable: true,
width: 100,
});
text.selectAll();
text.enterEditing();
fabricCanvas.add(text);
fabricCanvas.requestRenderAll(); Problem is: The hidden textbox appears from what i can see in the devtools, The text gets selected and the editing cursor appears but i cant really edit the text at all. The only solution i found to this is to use |
Beta Was this translation helpful? Give feedback.
Replies: 2 comments 8 replies
-
i think you should do: const text = new fabric.Textbox("Edit text", {
left: pointer.x,
top: pointer.y,
fontFamily: "Kalam",
fontSize: 20,
fill: "white",
editable: true,
selectable: true,
width: 100,
});
fabricCanvas.add(text);
fabricCanvas.setActiveObject(text);
text.enterEditing();
text.selectAll();
fabricCanvas.requestRenderAll(); this would be an order of operation that mimic user actions and should work out of the box. If this does not work then there is a bug |
Beta Was this translation helpful? Give feedback.
-
@asturur just tested this out. It doesn't work. Unless i remove `fabricCanvas.setActiveObject(text);` and have `activeOn: "up"`
|
Beta Was this translation helpful? Give feedback.
The issue with that is that you are probably stealing focus to the textbox.
Try to move your code to mouseUP event and if you can't do that or if that doesn't work do that part of the textbox code ( creation, position, and all the rest ) in a setTimeout of few ms ( 2-4 are enough ) to be sure your code execute after the events.