TextEditView neither shows placeholder nor the text after losing focus

[jsdevlover]

For native environment (Android), TextEditView doesn't show the placeholder text unless it is focused. Also, after entering some text in the TextEditView it disappears after view loses focus.

[collingreen]

What version of devkit-core are you using? This sounds like an issue fixed in https://github.com/gameclosure/devkit-core/commit/62760514acd09d529c61ee80261342839c1da6fe (Oct 14) which should be in 4.0.2 and above.

[jsdevlover]

I am on 4.0.2 itself but still facing this.

[collingreen]

That's unfortunate. Perhaps it is a different issue.

If you put together a minimal Application.js file that demonstrates the issue I'll have a look at it.

[jsdevlover]

Here it is..

import ui.TextEditView as TextEditView;

exports = Class(GC.Application, function () {

    this.initUI = function () {
        var textEditView = new TextEditView({
            superview: this.view,
            x: 20,
            y: 10,
            backgroundColor: "#FFF",
            width: 280,
            height: 80,
            color: "#000",
            hintColor: "red",
            hint: "Hello World...!"
        });

    };

    this.launchUI = function () {
    };
});

And here are few more details:

• First time app is launched, placeholder is visible.
• Click on TextEditView and enter some text. Text is visible.
• Click outside of TextEditView, entered text disappears.
• Clear all the entered text and click outside of view. Placeholder doesn't appear this time.

Thanks.

[collingreen]

I was way off - the commit I linked above is for prompts, not edit fields.

I've definitely confirmed the issues on android, and I've run into some additional ones in the simulator as well (did not test ios). It looks like the browser textedit logic has an issue placing the text when editing.

Android Summary

• the placeholder text starts in the correct location with the correct color
• first click changes to the blinking cursor but does not bring up the keyboard
• second click brings up the keyboard - typing works in real time as expected
• closing the keyboard by clicking elsewhere works as expected
• clicking on the text again shows the blinking cursor again (but without keyboard)
• clicking away at this point will make the text disappear (it is not deleted, just hidden)
  • clicking again shows the text and the blinking cursor

Note - it seems like losing focus directly makes the text hide incorrectly. However, losing focus from a different overlay (the keyboard or the copy/paste overlay) does NOT hide the text.

Simulator (using the above code but with the background set to blue to make it easier to see).

• clicking zooms in the text, making it no longer fit the input area correctly (and changes the color to gray)
• typing text enters the correct color (#000 in this case) but is in the same incorrect size/location as the hint text
• hitting enter places the new text correctly - clicking again moves the text out while editing, just like before

[jsdevlover]

Thanks @collingreen for confirming.

[jsdevlover]

@collingreen , You suggested me to use InputPrompt but that won't work because I am trying to create a registration form.

This has now become a blocker for me. Could you please give me some pointers so that even I could look into this and send out a PR if possible.

[collingreen]

@jsdevlover I haven't dealt with that code before so I don't have any specific advice aside from that initial checklist of things that look wrong. I also didn't look at the ios version to see if it has similar problems.

I understand your goal of entering text in a form - we have used input prompts for simple text input / registration forms before with good success, so it isn't an unreasonable suggestion if you just want something that is already working that accepts user input. Otherwise, you'll have to either look into whatever is causing the issues here or roll your own input box.

[jsdevlover]

@collingreen , I have created a PR for keyboard not being brought up on first attempt. This PR also fixes the cursor positioning issue if TextEditView has some text while focusing.

Here are my findings for text disappearing on losing focus.

TextEditView contains two views _editText (allows user to type in input text) and textBox (displays typed text). These two views are toggled based on focus.

While I debugged I could find that on losing focus textBox is made visible correctly but it's y property (the positioning co-ordinate) has an incorrect value (around 450+ in my case) and thus it is not positioned correctly. I could not find how and where this y value gets changed.

But I found a workaround - wrapping the TextEditView with another view with same width and height solved the text positioning issue.

Hope this helps.

[collingreen]

@jsdevlover I'm beginning to suspect that this is a different problem than the one we originally assumed. Your example code exhibits the broken behavior above, but I can fix all of the android problems (keyboard on first click, cursor in wrong spot, text disappears when clicking away) by simply replacing the the 3 character color hex codes with 6 character hex codes or color names.

import ui.TextEditView as TextEditView;

exports = Class(GC.Application, function () {

    this.initUI = function () {
        this.view.style.backgroundColor = 'blue';

        //Startup.start();
        var textEditView = new TextEditView({
            superview: this.view,
            x: 20,
            y: 10,
            // backgroundColor: "#FFF",
            backgroundColor: "#FFFFFF",
            width: 280,
            height: 80,
            // color: "#000",
            color: "#000000",
            hintColor: "red",
            hint: "Hello World...!"
        });

    };

    this.launchUI = function () {};
});

Does this same thing fix it on your end using the latest devkit-core tag?

[jsdevlover]

Yes. It does. Thanks. An appropriate warning message notifying this would have helped a lot.