Creating a text input field

Hi, I’m trying to add a simple text input to my app. I’m creating a TextField object and then, after setting some properties like the defaultTextFormat, I set its type to TextFieldType.INPUT. While running (HTML5 target), I do see the mouse cursor changing from the pointer to the input caret while moving above the field, however when I click it to start typing I get no results - it seems the field is not getting focus. Am I missing something? Here the interface (“cena2” is the input field text):

input

Does it make a difference if you set type = TextFieldType.INPUT before any other properties?

Are you using Feathers UI at all?

No, the order of property seeting doesn’t seem to affect it. And no FeathersUI: it’s just this simple input, so no need to add the entire library for that (other projects of mine using FeathersUI are working as expected). As an workaround I’m setting the stage focus to the text field - this is working - but as soon as I click outside it I’m unable to return the focus to it.

EDIT

I add a mouse click event to the input text field itself to force it to get focus:

private function onInputClick(evt:MouseEvent):Void {
    mystage.focus = inputfield;
}

I asked about Feathers UI because if its FocusManager is enabled, that can sometimes prevent non-Feathers UI objects from receiving focus. If you’re not using Feathers UI, we can rule that out.

If you add a MouseEvent.MOUSE_DOWN or even CLICK listener to the TextField, does it get called when you try to interact with it? If not, there could be a couple of possible explanations:

  1. Another display object is on top of the TextField (perhaps with alpha 0), and that display object is blocking mouse events from reaching the TextField.
  2. Some other mouse event listener elsewhere in your code is calling event.stopPropagation(), event.stopImmediatePropagation(), or possibly event.preventDefault(). That could prevent the TextField from running its own internal event listener for the same event.

I just did what you suggested and it worked fine to set the focus :wink: Thank you!

Hmm… I hadn’t actually suggested any possible solutions yet. My suggestions were purely to help us figure out what exactly might be happening. For debugging the issue. The TextField should be receiving focus automatically. If you’re setting stage.focus manually, then there’s still an issue, and you only have a workaround.

Since you said the FeathersUI can interfere on the focus, I started looking the code for references to it (it’s a bigger project). I saw this at the project descriptor:

<haxelib name="feathersui" />

It may have been used on the past and not removed. Checking the full code I did see a class that extends feathers.controls.Application. Since I’m unable to change it right now I made a new smaller project just to test the text input and it worked! So your first guess must be right.

If you add the following to your project.xml, it will skip the creation of the focus manager in the Feathers UI Application class. This should allow you to disable that behavior without removing extends Application.

<haxedef name="feathersui_disable_application_focus_manager"/>

There are various other managers that can be disabled too, if you need to. More info at Feathers UI haxedef option reference.

Oh, that worked without the need of manually setting the focus. Thank you a lot!