Closed deodad closed 4 years ago
You need tabIndex=0
to be set somewhere. Then it would be focusable.
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)
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.
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:
textarea
canvas
How to solve:
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
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!
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.