GUI inputtext not getting keyboard input on multi canvas scene

Bugs
1

Hi, not sure if this is a bug but I’ve been trying to set up a multiple canvases scene and I’ve found that the inputtext gui element is not accepting keyboard input if the active canvas is not the one used for engine creation. I’ve updated an existing playground with this issue:

https://www.babylonjs-playground.com/#I1Y5YT#15

There you should be able to type in some text after clicking on the input text field, but its not working if engine.inputElement is not set to the main canvas ( see lines 12 - 13).

Is there a way to make the input text element accept text input from the active input canvas?

Thanks

2

It is complicated because the GUI gets its input from the hosting scene so this may not work :frowning:

3

I see. But the canvas I’m trying to get to work is the lower half one, which almost work: it accepts mouse pointer events and when you click on the input text it gets focus and changes its appearance, but it doesn’t get keyboard input afterwards and you can’t write anything in it.
So I guessed there may be any workaround or fix for this.
Edit: I’m using only one scene.
Edit2: it works on mobile as it shows a prompt for writing the text. So the problem is on desktop

4

Oh wait I did not pay attention enough to your PG. Why are you rendering the scene twice?

5

Is to show something similar to what I’m currently working on but I don’t know how to reproduce in the playground. The real scenario is an engine created with an empty working canvas and then 2 real visible canvases in the web page. Each of them has a different camera but only one is driven by the user input and has a few input text gui elements that can be clicked and edited (but they don’t work as shown in this playground).
If I build the standard setup without the registerview thing and just one main canvas, it works. But in my particular scenario I need this multiple canvas setup.

6

maybe repro in jsfiddle? or codepen? But basically I guess it is really similar to:

7

Thanks Deltakosh for replying to this thread. I followed the documentation and also had a look at the sample scene code and everything works pretty well except for the input text, where I got the exact same issue as in the PG I prepared for this thread.
So I think the issue may have something to do with how the gui2D or the input text component handles keyboard input events, because the mouse events on that secondary canvas are handled correctly but not the keyboard ones. Maybe they are stuck to the canvas used for creating the engine?

8

The keys are captured from the scene:

The scene will rise onPreKeyboardObservable when the root canvas received a key event. So yes technically only the root canvas will be able to capture the keyboard events

Let me see how I can fix that

9

Ok based on my understanding if you do this:

scene.detachControl();
engine.inputElement = myNewElement;
scene.attachControl();

It should work because the keyboard events will come from the new canvas

can you try that?

10

It makes sense. I have tried it, but still the same result. I’ve updated the playground with a similar setup of what I have offline:

https://www.babylonjs-playground.com/#I1Y5YT#18

The user is suposed to interact with the lower canvas, which actually works fine. The problem is when you try to type in some text in the inputtext after you click on it to get focus, as the keys are not captured. But if you have some text in the clipboar and hit “control + v” it pastes the text in the focused inputtext.

11

Let me check that :slight_smile:

12

Ok will be fix in next release (in a hour or so)

1 Like
13

Thanks for checking this out and providing a fix :wink: