Focusable GUI Buttons

Hi,

I am implementing some pretty simple forms using Babylon GUI, and with TextInputs I have figured out how to override tab characters so that I can set focus to the next relevant control on the ‘form’:

However, I would like to set focus to buttons as well, is there any way to do this? AdvancedDynamicTexture.moveFocusToControl needs a IFocusableControl, which BABYLON.GUI.Button doesn’t seem to implement. Is this something you gentlemen would consider?

I suppose one would need to be able to set keyboard observables on buttons as well in order to watch for tab or enter characters.

Anyway, wondered if anything like this (or something which could accomplish the same effect to the user) was on the roadmap. Thanks again for a great library.

It is not but we can definitely add it :slight_smile:
You can create an issue for it on the repo if you want

Hi,

I’m trying to do what you did at the moment (a form that can be navigated through using “tab” key).
Can you let me know where and how you attached an observable to react to the “tab” key press event ?
There’s plenty of observable mechanisms for the pointer at different levels (ADT, controls…), but I see nothing to handle keyboard events…

Thanks

You handle keyboard events at the scene level Interact with a Scene - Babylon.js Documentation

Oh, ok, thanks !

What I want to do is move from a “user name” field to a “password” field by pressing ‘tab’ as forms can in HTML.
It seems it could work with but the ‘scene.onKeyboardObservable’ method in most conditions, but in mine, as my BABYLON.GUI.TextInput has the focus, the ‘tab’ key stops being captured completely.
Neither the ‘onBeforeKeyAddObservable’ nor the ‘onKeyboardEventProcessedObservable’ of the TextInput are able to catch the ‘tab’ key either.
Is that a limitation, or is there an other way ?

Thanks,

Could you create a simple repro in the playground ? it would help troubleshooting faster :slight_smile:

Well, I did so, and it worked (partially).

So I did the same in my code (again), and this time it worked (I changed a lot of things since yesterday, and there was obviously a problem between the chair and the keyboard that can explain the change in behavior :wink: , sorry for troubling you for this).

Now what does not work for me is that when the focus change to the next field, the whole document looses the focus (which probably needs to be handled out from Babylon, as the focus exits Babylon’s scope).

Anyway, here is a PG that reproduce the situation (and could serve as example of a form if other needs, I didn’t found any other) : Babylon.js Playground

I’ll dig into why my browser (chrome) captures the focus on ‘tab’ key, and come back with what I’ll have found.

event.preventDefault() prevents the browser’s focus handling from running.

https://www.babylonjs-playground.com/#7NPCJU#1

3 Likes

Was there ever an issue created for focusable GUI Buttons? I’m trying to create a simple menu system (4 buttons with up/down keyboard navigation) and I believe having Buttons implement IFocusableControl would make keyboard navigation significantly easier - specifically even simple things like managing up/down keyboard events and managing a “focused cursor” would become much simpler than having a keyboard observable and some state logic at the scene level.

Created a feature task on github - GUI Buttons and IFocusableControl · Issue #9378 · BabylonJS/Babylon.js · GitHub - and referenced this post since I didn’t see anything when doing a quick github issue search.

Thanks a lot!!!