TextInput bug with soft keyboard (mobile)

classic Classic list List threaded Threaded
3 messages Options
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

TextInput bug with soft keyboard (mobile)

Erik J. Thomas
I spent the better part of a day trying to solve for an annoying user experience with TextInput on mobile devices (Apple). 

If a TextInput or TextArea input field is located in the top 50% of the display area, and a setFocus() call on the input field is made, the soft keyboard displays and the input cursor is visible (all is well). But if the input field is where it would be obscured by the soft keyboard (lower half of the display), Flex moves the content up so the input field is visible (nice feature), but the input cursor disappears.

I have tried many workarounds, all failing:

  • Using callLater to call a function that sets the input focus a second time.
  • Listening for soft keyboard events and then setting input focus again.
  • Setting kludge timer to wait after the soft keyboard is activated and set focus to the control again after waiting a variety of different durations.

My latest idea is to try scrolling the content up myself so I know the input field is visible BEFORE setting focus so the input cursor will always be visible, but operations on the scroller don't give me the ability to place the input field exactly above the soft keyboard. Before I go down the road of firing an event from the ItemRenderer that the parent view with the scroller can react to I wondered if there is a known solution that's less work.

Anyone found a good workaround for this obvious bug in Flex (or perhaps AIR)? BTW, I ran into this bug the first time about 5 years ago and worked around it by placing input fields in the top 50% of the display area, but in this case, my content is scrolling so I cannot do that. I was surprised to see this bug has never been fixed.

For more detail read on...

My design is a Facebook-ish social app (for one view) with scrolling content:




When the user taps Comment and the input field is in the lower half of the device's display area, Flex moves the content up enough for the input field to be visible above the soft keyboard, but the input cursor never displays:


Thanks so much for your suggestions!

Erik




Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: TextInput bug with soft keyboard (mobile)

Fréderic Cox
Which skin are you using for the TextInput? The default spark textinput skin? The mobile textinput skin? Or ScrollingStageTextInput ?

On Thu, May 11, 2017 at 5:20 PM, Erik J. Thomas <[hidden email]> wrote:
I spent the better part of a day trying to solve for an annoying user experience with TextInput on mobile devices (Apple). 

If a TextInput or TextArea input field is located in the top 50% of the display area, and a setFocus() call on the input field is made, the soft keyboard displays and the input cursor is visible (all is well). But if the input field is where it would be obscured by the soft keyboard (lower half of the display), Flex moves the content up so the input field is visible (nice feature), but the input cursor disappears.

I have tried many workarounds, all failing:

  • Using callLater to call a function that sets the input focus a second time.
  • Listening for soft keyboard events and then setting input focus again.
  • Setting kludge timer to wait after the soft keyboard is activated and set focus to the control again after waiting a variety of different durations.

My latest idea is to try scrolling the content up myself so I know the input field is visible BEFORE setting focus so the input cursor will always be visible, but operations on the scroller don't give me the ability to place the input field exactly above the soft keyboard. Before I go down the road of firing an event from the ItemRenderer that the parent view with the scroller can react to I wondered if there is a known solution that's less work.

Anyone found a good workaround for this obvious bug in Flex (or perhaps AIR)? BTW, I ran into this bug the first time about 5 years ago and worked around it by placing input fields in the top 50% of the display area, but in this case, my content is scrolling so I cannot do that. I was surprised to see this bug has never been fixed.

For more detail read on...

My design is a Facebook-ish social app (for one view) with scrolling content:




When the user taps Comment and the input field is in the lower half of the device's display area, Flex moves the content up enough for the input field to be visible above the soft keyboard, but the input cursor never displays:


Thanks so much for your suggestions!

Erik





Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: TextInput bug with soft keyboard (mobile)

Erik Thomas
Hey Frederic:

Thanks for your response. I have worked around this problem in the one instance it occurs in my app. It's a kludge but works for now, I just set text to a blank space ' ' and then remove it when it gets focus and the input cursor shows up after the contents are scrolled into view to make way for the soft keyboard.

I have tried both the mobile textinput skin and the spark, and a custom skin making a copy of both the spark and mobile skins. Trouble is I uncovered other bugs including when using the mobile skin, clicking (tapping) into the input field, the cursor appears almost in the middle of the field and the prompt text never disappears when typing. I didn't have time to troubleshoot all that and fix it. My workaround is OK for now. With either custom skins (just copies of the ones TextInput uses in the spark and mobile libraries even with no changes at all), I got a viewPort error deep in the framework every time running the app.

I upgraded to Flex SDK 4.16 from 4.15, using AIR 25 now, and that didn't make any difference. There is something else going on.

I'm using my own view management mechanism with an Application (single page) and as the user navigates, I hide one view and show another, having 5 views active with 4 hidden all the time and this seems to be affecting the Stage TextInput field. Now on several of my views the TextInput fields won't accept focus at all. The soft keyboard pops up and immediately disappears. This affects three of the 5 views. I am doing something fundamentally against the way Flex was designed, or just uncovered a bug.

Thanks.

Erik

> On May 11, 2017, at 9:42 AM, Fréderic Cox <[hidden email]> wrote:
>
> Which skin are you using for the TextInput? The default spark textinput skin? The mobile textinput skin? Or ScrollingStageTextInput ?
>
> On Thu, May 11, 2017 at 5:20 PM, Erik J. Thomas <[hidden email] <mailto:[hidden email]>> wrote:
> I spent the better part of a day trying to solve for an annoying user experience with TextInput on mobile devices (Apple).
>
> If a TextInput or TextArea input field is located in the top 50% of the display area, and a setFocus() call on the input field is made, the soft keyboard displays and the input cursor is visible (all is well). But if the input field is where it would be obscured by the soft keyboard (lower half of the display), Flex moves the content up so the input field is visible (nice feature), but the input cursor disappears.
>
> I have tried many workarounds, all failing:
>
> Using callLater to call a function that sets the input focus a second time.
> Listening for soft keyboard events and then setting input focus again.
> Setting kludge timer to wait after the soft keyboard is activated and set focus to the control again after waiting a variety of different durations.
>
> My latest idea is to try scrolling the content up myself so I know the input field is visible BEFORE setting focus so the input cursor will always be visible, but operations on the scroller don't give me the ability to place the input field exactly above the soft keyboard. Before I go down the road of firing an event from the ItemRenderer that the parent view with the scroller can react to I wondered if there is a known solution that's less work.
>
> Anyone found a good workaround for this obvious bug in Flex (or perhaps AIR)? BTW, I ran into this bug the first time about 5 years ago and worked around it by placing input fields in the top 50% of the display area, but in this case, my content is scrolling so I cannot do that. I was surprised to see this bug has never been fixed.
>
> For more detail read on...
>
> My design is a Facebook-ish social app (for one view) with scrolling content:
>
>
>
>
> When the user taps Comment and the input field is in the lower half of the device's display area, Flex moves the content up enough for the input field to be visible above the soft keyboard, but the input cursor never displays:
>
>
>
> Thanks so much for your suggestions!
>
> Erik
>
>
>
>
>

Loading...