3/4 solved GUI Input Text Behavior

[JohnK]

I was trying to use the GUI inputText control to enter an url. Perhaps my expectations are wrong but I would expect to be able to

1. Key in a colon : [Solved in latest version]
2. Have new text replace old following a press of "Enter" key [Solved in latest version]
3. Focus after "Enter" key [Solved in latest Version]
4. Paste text

I could not get any of these results in the example https://www.babylonjs-playground.com/#UWS0TS

Are these known limitations?

[ssaket]

It's a bug in the core module; just checked for GUI, works fine.  I think it's happing because of scene pointer events(seriously it has become a jinx now, one bug gets fixed and a new one gets introduced ). pinging @Deltakosh

For ref - (https://www.babylonjs-playground.com/indexStable.html#UWS0TS)

[Dad72]

I also note its limitations.

1) It is possible to move the cursor with the arrow keys  but with the mouse. we would say that there are problems. (I need to double click in some place of the inputText) I'm not sure I understand: Key in a colon.  Maybe you talk about of  ! who do not want to show up (which I also notice)

2) we can play with the observables I think.

3) we can not currently paste text, which could be very useful indeed.

This is the 3 missing thing to inputText that would be great and essential to have for more flexibility of use.

[JohnK]

The issue with 2) is not quite as simple as I stated.

Remove the long text on line 31,  https://www.babylonjs-playground.com/#UWS0TS#19 write some text and press enter , new text is accepted and displayed. Immediately click in inputText control and no effect. Click in PG edit area then again in the inputText control which now again accepts edits.

Return to this PG https://www.babylonjs-playground.com/#UWS0TS

 Click in inputText control, use right arrow key to move to end of text, use Backspace key to delete all the text. Just because the control goes blank do not assume all the text has been deleted, wait a moment and press Backspace again. Write new text and press enter new text is accepted. If start of old text appears then (taking into account above problem) click in PG edit area and then back into control use arroww keys to see added text.

Now try this, click in inputText control, use del key to delete forward and then try the Backspace key it no longer works.

 

[ssaket]

48 minutes ago, JohnK said:

Remove the long text on line 31,  https://www.babylonjs-playground.com/#UWS0TS#19 write some text and press enter , new text is accepted and displayed. Immediately click in inputText control and no effect. Click in PG edit area then again in the inputText control which now again accepts edits.

yeahh.. I noticed, unfortunately I have to click again for 6-7 times after the first click  Clicking in the PG area and back at the input doesn't seem to be working for me.

 

48 minutes ago, JohnK said:

 Click in inputText control, use right arrow key to move to end of text, use Backspace key to delete all the text. Just because the control goes blank do not assume all the text has been deleted, wait a moment and press Backspace again. Write new text and press enter new text is accepted. If start of old text appears then (taking into account above problem) click in PG edit area and then back into control use arroww keys to see added text.

this is happening for all input controls even passwords. bug repo- https://www.babylonjs-playground.com/#UB58DY#2

 

 

Edit: I have figured out the cause for the 2nd. The deletion logic is correct. It's just it is hidden. So, as a user when I delete the character till the the start position of the input box, I think I have deleted them all , but duhh !! they are hidden. I think we need to do a right shift to make the rest of the characters visible . Being a noob I don't how to implement this  . Any suggestions ??

 

[JohnK]

2 hours ago, Dad72 said:

I understand: Key in a colon

: is needed for an URL https://

                                        

[Dad72]

Ok I see the problems you say JohnK. I hope that can be corrected.

[JohnK]

Actually the more I investigate the weirder things get

Here is part of the code for inputText

// Printable characters
        if (key &&
            ((keyCode === -1) ||                     // Direct access
                (keyCode === 32) ||                     // Space
                (keyCode > 47 && keyCode < 58) ||       // Numbers
                (keyCode > 64 && keyCode < 91) ||       // Letters
                (keyCode > 185 && keyCode < 193) ||     // Special characters
                (keyCode > 218 && keyCode < 223) ||     // Special characters
(keyCode > 95 && keyCode < 112))) { // Numpad

So I thought I had found the reason for not allowing the colon : (ascii 58) and also not allowing forward slash / (ascii code 47)

Yet in FF (62.0.3) : not allowed and / is allowed once then FF loads and jumps to its quick find

Chrome and Edge both allow : and / to be entered

[ssaket]

Solved it, if we call this.onFocus before the return, it solves the focus problem  

EDIT: I want to create a PR but its just 1 line.

public processKey(keyCode: number, key?: string) {

// Specific cases

switch (keyCode) {

case 32: //SPACE

key = " "; //ie11 key for space is "Spacebar"

break;

case 8: // BACKSPACE

if (this._text && this._text.length > 0) {

if (this._cursorOffset === 0) {

this.text = this._text.substr(0, this._text.length - 1);

} else {

let deletePosition = this._text.length - this._cursorOffset;

if (deletePosition > 0) {

this.text = this._text.slice(0, deletePosition - 1) + this._text.slice(deletePosition);

}

}

}

this.onFocus();

return;

[JohnK]

Checking out some control.log in my local version of GUI, in Firefox a colon : returns a keycode of 16 for SHIFT then 59 for ;. In Chrome and Edge you get 16 for SHIFT then 186 which is allowed.

All return 191 for / which FF appears to treat as a special character.

So it looks like I am wrong in taking the code as ascii code.

@ssaket well caught

 

[trevordev]

@ssaket are you saying this is an issue with babylon? If so, yes, please to do create a PR  

[JohnK]

28 minutes ago, trevordev said:

are you saying this is an issue with babylon?

I have a thought that the focus issue may be playground related. I came across it in the PG and now trying it out in a local project it does not seem to happen. There does seem to be a couple of issues with inputText that require further investigation before a PR of @ssaket's  probable solution to one aspect of it.

Would be useful if more people can test inputText in a PG and externally so we can have a full picture.

[Guest]

I can repro as well

Trevor will look into it asap

 

Thanks guys!

[Guest]

And btw this is not related to inputs but to the focus manager of the GUI. We recently fixed an issue with virtual keyboard and I'm sure that broke the input text somehow 

[JohnK]

@trevordev have found some more info. the colon : issue for FF is known google closure-library   line 70 as is the forward slash issue for FF

The colon issue is easily solved in inputText.ts by changing

(keyCode > 47 && keyCode < 58) || // Numbers

to

(keyCode > 47 && keyCode < 60) || // Numbers

The forward slash seems more of a problem.

Would be nice if a CTRL V did a paste into the inputText control.

[Sebavan]

Ping @trevordev

[Guest]

For new features like ctrlV I would suggest adding a new feature request on the repo so we can track it

[Guest]

(Unless someone wants to do a PR which is even better)

[ssaket]

@Deltakosh If we want to add ctr-v feature, then a new event type (ClipBoard)https://developer.mozilla.org/en-US/docs/Web/Events/copy has to be added in core module along with KeyboardEvents and MouseEvent. Going through the current code I couldn't understand where are we registering/removing them from the DOM Events. Any guidance is much appreciated   

[trevordev]

Created PR for the focus issue and prevent backspace navigation in firefore here: https://github.com/BabylonJS/Babylon.js/pull/5382

[trevordev]

@ssaket scene.ts is where all the listeners are attached (line 2179), they are listened to by advancedDynamicTexture.ts 's  _preKeyboardObserver which calls processKeyboard on the current focused control (such as the one found in inputText.ts). Maybe the copy event can be listened to on the scene like the others and sent down to the controls the same way if needed.