Sign in to follow this  
JohnK

GUI Input Text Behavior

Recommended Posts

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?

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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.

 

Share this post


Link to post
Share on other sites
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 :P . Any suggestions ??

 

Share this post


Link to post
Share on other sites
2 hours ago, Dad72 said:

I understand: Key in a colon

: is needed for an URL https://

                                        

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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;

Share this post


Link to post
Share on other sites

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

 

Share this post


Link to post
Share on other sites
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.

Share this post


Link to post
Share on other sites

@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.

Share this post


Link to post
Share on other sites

@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 :)  

Share this post


Link to post
Share on other sites

@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.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this  

  • Recently Browsing   0 members

    No registered users viewing this page.