Unable to type a space

[sknick]

I've embedded the editor successfully into my application and enabled a theme along with Python syntax highlighting. Everything seems to be working perfectly, except for the baffling fact that I cannot type a space. (I can paste one though.)

Obviously, it suggests to me something is capturing the spacebar key event, but there is nothing in my code doing that, so I am a little lost. Any ideas?

[sknick]

Another weird data point: I can type spaces on a new blank line at the end of the document only.

[sknick]

I added this hack to get around this issue for now. Baffling!

                this.__editor.container.addEventListener("keypress", (e) => {
                    if (e.code === "Space") {
                        this.__editor.insert(" ", true);
                    }
                });

[sknick]

Note: This hack can still result sometimes in two spaces being typed in the place of one, though not as frequently. Really strange behavior.

[nightwing]

Sounds like there is something on the page that captures events before the editor gets chance to handle them. Does it work if you put a simple textarea instead of ace? Can you use browser devtools to inspect the event listeners on your page?

If you can show me a page where this happens i can help you to find the bug.

[sknick]

I don't have anything public but I might be able to whip up a demo at some point. Regular text areas are fine.

[sknick]

The attached Qooxdoo application shows this behavior. If you use VS Code to open the folder, there is a dev container if you don't want to set up the environment on your host. To build the UI, there is a VS Code task, or you can run this on the command line:

npx qx compile --watch

That will create an UI/Source/compiled/source/index.html file you can load into your browser. To instigate the behavior where you cannot type a space, click to another window on your desktop and then return to the browser.

test.zip

[sknick]

@nightwing

[nightwing]

Sorry, i had missed your previous message, thanks for creating an issue to remind me.

The bug is happening due to the following code in Qooxdoo

      /**
       * Get the target element for key events
       *
       * @return {Element} the event target element
       */
      __getEventTarget__P_105_8: function __getEventTarget__P_105_8() {
        var focusHandler = this.__manager__P_105_0.getHandler(qx.event.handler.Focus);
        var target = focusHandler.getActive();

initially, it returns textarea element, but when clicked outside the editor and then inside, it returns a div element in ace, and then keyboard handler logic in Qooxdoo calls prevent default on keypress event to prevent the default scrolling behavior in browser when focus is not in div.

Looks like Qooxdoo is simply setting that to the clicked element, so not sure what we can do on ace side to circumvent this bug in Qooxdoo

[sknick]

Thanks! I'll chat with the Qooxdoo guys.

[sknick]

So it appears that setting the "contenteditable" attribute on the div resolves it:

scriptField.getContentElement().setAttribute("contenteditable", "true");