Interacting with a canvas element inside a focus lock

[deodad]

I'm rendering a canvas with interactive elements that take keyboard input inside a FocusOn container. With the focusLock enabled, I am unable to add any input to these elements. I believe it makes sense since they aren't actually focusable text inputs but I haven't found a way to work around this. I was hoping to find some way to make the focus lock "ignore" that area but haven't succeeded.

P.S. Thanks for the awesome library.

[theKashey]

You need tabIndex=0 to be set somewhere. Then it would be focusable.

[deodad]

I did try setting this on the canvas, and it does make it focusable, but somehow to keydown events seem to be surpressed.

(closing the issue since it's not a real issue, appreciate the help)

[deodad]

Here's a sandbox: https://codesandbox.io/s/focus-on-9xm77

It makes sense why it's not working because the editable text element isn't a native element. Just trying to figure out a work around.

[theKashey]

So, when you are editing text - you are entering something to the textarea outside of the lock.

Just add setInterval(() => console.log(document.activeElement), 1000) to the end of this test:

• without lock the active element is textarea
• with lock - it is canvas

How to solve:

• move text area inside lock, not sure you can do it
• use white-list properly to "ignore" element with data-fabric-hiddentextarea. Which is ☹️, not exposed throught focus-on. However, probably that's the only chance to handle it without touching depths of fabric

[deodad]

Ah I see! Unfortunately/fortunately I'm having to maintain my own fabric build in this case, so touching the depths works. I changed the textarea to append into the same container where the canvas is and it works flawlessly.

THANK YOU!