feathersui / feathersui-starling

User interface components for Starling Framework and Adobe AIR
https://feathersui.com/learn/as3-starling/
Other
914 stars 386 forks source link

TextInput width changes from focus in / focus out - Android Only #1812

Closed urthling closed 2 years ago

urthling commented 2 years ago

Hey Josh,

Is this an issue with the runtime?

Feathers 4.1.1 / TextInput

Image 1 = Editing the text (both are good) Image 2 = Focused out (issue on Android)

Note that on the Android device, when focussed out, the text width is less than the actual width of the field -- right padding is set to 0, so iOS is rendering as one would expect. In a multiline TextInput, the text wraps too soon - wrong width.

ios_android_inconsistent_textinput

joshtynjala commented 2 years ago

Interesting. I don't know what would cause that.

urthling commented 2 years ago

I've replicated this in a simple project and determined the cause -- when creating the sample project, I first used a basic rectangle and scale factor of 2 and I couldn't replicate the issue.

However, in my project is using the recommended screen setup: https://raw.githubusercontent.com/Gamua/Starling-Framework/master/samples/scaffold_mobile/src/utils/ScreenSetup.as

Once I added this to the test project, then sure enough, I was able to replicate. This is the setup I used that doesn't account for the devices actual scale and uses a value of 2 -- and everything works as expected, no truncation.

this._starling                  = new Starling(BlackScreenTest      , this.stage, new Rectangle(0, 0, this.stage.fullScreenWidth, this.stage.fullScreenHeight));
this._starling.stage.stageWidth         = this.stage.fullScreenWidth/2;
this._starling.stage.stageHeight        = this.stage.fullScreenHeight/2;

As you know, ScreenSetup calculates the actual scale from the device:

var screen          :ScreenSetup    = new ScreenSetup(this.stage);
this._starling                  = new Starling(BlackScreenTest      , this.stage, screen.viewPort)
this._starling.stage.stageWidth         = screen.stageWidth;
this._starling.stage.stageHeight        = screen.stageHeight;

In my project, in order to place everything on the screen at exactly the same position, I assume a width of 416 and height of 736, then I scale everything up or down in order to fit on screen.

For example, the far right of the screen is always sX(416) -- I allow for different aspect ratios, so taller/shorter devices by calculating the extra/reduced height, then the very bottom of the screen is sY(736) + bufferedHeight. This allows me to specify exact x,y positioning, and have a consistent look across all screen sizes, font sizes etc. Everything looks great from tiny Android devices through large screens -- the only issue is what is happening on Android devices. Honestly I'm not sure if this has always been an issue or since a new AIR release..

So, the TextInput I apply a scale like this:

textInput1.scaleX               = this.coreModel.scaleFactorX;
textInput1.scaleY               = this.coreModel.scaleFactorY;

I've opened this issue on Adobe-Runtime-Support but I wanted to ask you if this could in fact be something to do with Feathers or Starling? I'm assuming something like this is going to be a runtime issue but what do you think?

joshtynjala commented 2 years ago

@urthling Are scaleFactorX and scaleFactorY equal, or are they different values?

urthling commented 2 years ago

They're slightly different.. On my Samsung Note 8 they are:

0.8653846153846154
0.8654891304347826

I just tried setting the same value for scaleX and scaleY and also instead tried using textInput1.scale -- seeing same truncation just fyi..

Interestingly enough, this doesn't happen in the TextArea component...

joshtynjala commented 2 years ago

Those two scale factors seem close enough that they wouldn't cause any noticeable issues. If they were more different, that might have caused issues. However, that usually involves the editable text being out of bounds, rather than the texture/bitmap snapshot being clipped.

It may simply be that setting scaleX and scaleY is enough to cause this issue. StageText does not offer the ability to scale because it's not a real display object, and that's what TextInput uses in its default text editor, StageTextTextEditor. It might be worth trying TextFieldTextEditor instead, especially considering that you mentioned that TextArea is fine. TextArea uses TextField instead of StageText by default.

urthling commented 2 years ago

Ah, interesting, I'll give it a go, thank you!

urthling commented 2 years ago

Ah, thank you so much for your support Josh! That was it -- with a few tweaks (changes in where to set softKeyboard etc) problem has been resolved.

I guess I'm not seeing it on my iOS device because I'm not scaling very much.. a ticket is open with Harman at the moment, hopefully they can offer a solution to this by allowing StageText to scale so I can take advantage of native copy/paste etc..

Anyway, thank you again!

urthling commented 2 years ago

Just in case anyone comes across this thread, I realize, I simply need apply a scale to the width, height AND fontSize, rather than trying to scale the whole thing after the fact, and everything looks great and I can continue to use StageText throughout my project..