IText is not working properly when the Canvas is within a Bootstrap Modal

[WisdomSky]

Version

1.7.3

Test Case

http://jsfiddle.net/tzjtr09h/

Steps to reproduce

1.) Embed the canvas element inside a bootstrap modal 2.) Show the bootstrap modal 3.) Add an IText object to the canvas (this can also be done before the modal is shown)

Expected Behavior

Should be able to change text of the IText .

Actual Behavior

Cannot change or add text to the IText object.

Additional Information

This issue is caused by: https://github.com/kangax/fabric.js/blob/master/src/mixins/itext_key_behavior.mixin.js#L12

Working fix

Replace the following code:

fabric.document.body.appendChild(this.hiddenTextarea);

with:

this.canvas.lowerCanvasEl.parentNode.insertBefore(this.hiddenTextarea, this.canvas.lowerCanvasEl.nextSibling);
`

[asturur]

can you explain why? moving the textbox out of the document body makes ie11 copy paste stop working. Or some sort of similar issue.

[WisdomSky]

Hi @asturur ,

I understand that this problem is very specific to using FabricJS in a third-party library, and making a fix for this may possibly compromise different part of FabricJS or even introduce another unexpected problems.

In the fix I suggested, it seems that the hidden textarea is not focusable when it is added at the end of the document body while the bootstrap modal is open. But when we move the hidden textarea just somewhere within the modal, it will start to work again. So moving the hidden textarea somewhere near the canvas will be a good idea. I'm sorry, I really haven't considered how this will affect the other features, specifically the browser-specific ones.

I really think that it is not really necessary to provide a fix for this (right now). What I did is just download a local copy of FabricJS and made my modifications. Maybe we can just leave it for now. and may this serve as a reference for other people who are also looking for a workaround with this problem.

[asturur]

there are many way to make this. First you can just modify the enterEditing method to append the textarea on a different element instead of working on fork of the lib that will.make for you harder to get updates.

second are you sure that the bootstrap modal is not chewing up some event for some reason? that could be an area of change too.

[WisdomSky]

I'm not really sure what you mean by

modify the enterEditing method to append the textarea on a different element

since that is what I actually did to make it work.

second are you sure that the bootstrap modal is not chewing up some event for some reason?

If you check the jsfiddle link I included, I am just using a plain boostrap modal and I didn't add any events. The only thing I observed is, FabricJS is unable to set focus to the hidden textarea while the bootstrap modal is open and so if you try to type anything, it won't really update anything since the textarea is not really focused when the IText object is in editing mode.

[asturur]

are you sure the bootstrap in its modal, is not grabbing the events and keeping them?

the simple bootstrap modal is launched with javascript and jquery. are you sure that the jquery code is stopping the events from working ?

[WisdomSky]

Sorry I can't understand what you're trying to tell me.

But I honestly think that neither jquery or bootstrap is the problem and they should be out of the question.

[asturur]

No they are not. There is no such thing as a modal in a web page. There are divs and css and situation that looks like modal windows from normal windows based softwares.

That modal can be closed with ESC. it means is taking the keyboard input and chewing it up. That's it. The modal is just a div, you can put a fabric itext in a modal if the modal does not swallow the events and prevent default. Is interaction between events is not a specific problem in fabric or bootstrap. Is not something that we can fix.

[WisdomSky]

I guess you haven't really understand anything. But anyway, I won't try to push it anymore.

[asturur]

bootstrap is stopping the keyboard event from reaching things out of modal. we cannot make a change in fabric because of this.

you have the chance to change one single method in your project without having to modify the library directly and solve your compatibility issue.

there is really nothing to push anymore, with or without you wanting to do it.

[enriquemorenotent]

I did not get the solution to this problem... How can i fix this, without altering fabric.js? I am using as well Fabric within a Bootstrap modal box, and I would like to be able to edit IText, but as asturur said, seems like Bootstrap is chewing the event. Any solution to that?

[asturur]

@enriquemorenotent i m sorry i never saw your message.

Wisdomsky was suggesting that appending the hiddenTextarea inside the modal was solving the issue.

To append the hiddenTextarea inside the modal HTML, the best thing to do is to modify the enterEditing method of the iText class.

[cAstraea]

I'm thinking a solution like this one here http://jsfiddle.net/3jk3jvy7/ would work ? replace the text with a text input then create a new one with the value from the input. But I couldn't get it to work properly. It's acting very funky and out of position inside fancybox modal.

[syed-haroon]

@WisdomSky just remove tabindex="-1" from below code and things will work: <div class="modal fade" id="myModal" tabindex="-1" role="dialog"></div>

for some reason you still need tabindex, then god bless you ;)

[denzndhauz]

@syed-haroon It really works. Can you explain what happened? Thanks!

[PieterVanDiggele]

Had the same issue with firefox, and noted that there are multiple fixes. The thing I did to get the keyboard events to the Hidden text area is to change :

fabric.document.body.appendChild(this.hiddenTextarea); to : this.canvas.upperCanvasEl.parentElement.appendChild(this.hiddenTextarea);

to get the Textarea creatid within the context of the canvas itself. It will receive the same events as the canves ( wherever it is in the DOM ). Working on Firefox.

[Shmacked]

For those that found this thread and read @asturur and @enriquemorenotent 's comment, this script fixed it for me:

fabric.IText.prototype.on('editing:entered', function() {fabric.document.body.getElementsByClassName("lower-canvas")[0].append(canvas.getActiveObject().hiddenTextarea); canvas.getActiveObject().hiddenTextarea.focus();});

---Edit---

While this worked for me at the time, I was having a weird visual bug that was happening, due to the fact that I had my modal take up the whole page (I think, not 100% sure on that)... However, you can initialize a modal with options, and when I did $('#MyModal').modal({focus: false, show: false});, it initialized the modal, where it didn't take input, thus it could pass it on to the HiddenTextarea's, and then didn't display the modal after initialization (show: true will display the modal as soon as the code is ran). Solved my issues, the fabric.IText.prototype.on('................. etc from earlier is not needed, but I didn't want to delete it.

[Icc-thang]

How about vue bootstrap modal.

Can anyone help me with this?

[asturur]

I think someone commited some code to make this possible. RIght now you can provide your own container for the hiddenTextArea

https://github.com/fabricjs/fabric.js/commit/9425064c6600f83f4258ab143a69efcfb3ad8a50

provide a container that is outside the modal

[letrungdo]

const textEl = new fabric.IText("Text");
textEl.hiddenTextareaContainer = canvas.lowerCanvasEl.parentNode;
canvas.add(textEl);

[Shmacked]

const textEl = new fabric.IText("Text");
textEl.hiddenTextareaContainer = canvas.lowerCanvasEl.parentNode;
canvas.add(textEl);

I guess lowerCanvasEl is the same element as hiddenTextareaContainer, just from "canvas"'s perspective?