Text area without the cursor

Hi, I am still stumbling on basic issues with my forms.

Some of the text fields don't display the cursor when selected on android.
They display the color outline confiirming that they are selected and text can be entered normally on them but without the text cursor.
Not all fields have this issue, some display the cursor normally.
This is strange because all fields have the same inner html and css.

This problem only appears on android, I tested them on an iphone and it's ok.

Another problem that occurs both on android and ios is that when the text area is selected the keyboard appears and the form shrinks to fit in the remaining space.
Is it possible to avoid this behavior and keep the original size?


FormularioTextos.hype.zip (516.9 KB)

Sorry I cannot help you with this as I do not have an Android.

You do have a syntax error in you telaCheia() function.

Not seeing the shrinking on my iPhone ?

Thank you for your help Mark.

Did you select the form fields?
If so, did the cursors appear?
On my Android just the top field displays the cursor, the other 2 display the outline only.

Could you tell me about the syntax error?
I have disabled the fullscreen feature but I would like to correct the error anyway.

I cannot test on Android.

Not sure what element you are targeting for fullscreen but have a look at this

I'm not able to reproduce this using the latest chrome on android 8. When I click each field, I see a cursor and am able to edit appropriately.

Can you perhaps include more configuration information and include a video on exactly how you are reproducing this?

I assume you mean that if you have manually zoomed in, then click a text field, the viewport shrinks back so the editing text field can be seen. I don't know of a way to change this behavior, but there might be some way of getting clever with listening to the click handler and cancelling the events, but I think this whole action is likely tied to giving focus and can't be divorced. It seems like it is good UI anyhow to have the user see their entire text field?

Thanks Jonathan,

I could not record my Android 11 screen but the issue is the same both in Firefox and in Chrome.
The cursor appears only in the 1st field, in the others it appeared only after I typed something but disappeared when all the edited text was erased.

I also tested in a computer with MacOS 12.4 and in Chrome and Safari the cursors appeared normally in all fields, only in Firefox the problem was exactly the same.

Therefore I believe that there is some incompatibility with the browsers.
I recorded it in Firefox running on MacOS 12.4

The shrinking of the viewport only occurs on Firefox, on Chrome it
keeps the original size.
This is not a very serious issue because the user can always zoom in.
The inconsistent cursor is a bigger problem because the user will see the cursor in some fields and not in others and will not be sure if the text can be edited.

I will experiment with different combinations of the code and css to see if it makes any difference.

In your recording I see that there is a placeholder text. My guess is that the mechanism setting that text is interfering with the cursor/focus.

Hmm... I'm not sure, I can't reproduce it with as close to that config as possible for some reason.

I notice that you are using both Hype's Flexible Layout feature via the Scene Size's scale width/height turned on and set to 100%, as well as using custom code in the Head HTML to do document scaling. I would remove these one by one and see if that has any effect.

Similarly, you have the top-level element scaled by 80%; you may want to turn that off and see what happens.

I notice you checked "Position with CSS left/top" - you might also want to try unchecking that (the default) and see what happens.

Basically try to get this as "vanilla" as possible one-by-one and see if anything works.

Thanks Max and Jonathan

I excluded the placeholder text but it made no difference.
I will try with the default configuration.