Ionic2 ion-input not working on iOS Simulator - ios

I submitted my first ionic application for review to the App Store.
Basically, Apple rejected the review because they couldn’t login to my application. They said that when they tap on the username textfield, the keyboard doesn’t show up (They provided a screenshot and I have noted that they are using a simulator for testing).
I have being researching that there is a bug on the iOS Simulator, and the way to fix the problem is to Toggle the Software Keyboard, or uncheck the "Connect Hardware Keyboard".
I have a lot of back and forth messages with Apple, trying to explain this, but they replied that it still not working.
Honestly, I am not sure they followed the Keyboard steps. As far as I know, it works as expected on phisical devices, and in iOS Simulator when you toggle the keyboard.
Is there any solution, or another way to tackle this problem?

This is a well known bug that can be circumvented in two ways.
Press CMD + K and then click into the field.
Disable "Slow Animations" which can be found under "Debug" -> "Slow Animations". For me, that permanently fixes the issue. Shortcut is: CMD + T
Regarding Apple's rejection:
Tell Apple, that this is a known Bug ONLY for the simulator, and that they should disable slow animations and press CMD + K (twice).

Why don't you use one of these events on the text inpu:
keyup, keydown, keypress, input
and then use this plugin and explicitly show/hide the keyboard?
https://ionicframework.com/docs/native/keyboard/

You need to add the following line to config.xml:
<preference name="KeyboardDisplayRequiresUserAction" value="false" />
so that the keyboard will show in iOS when a text input is tapped.
(Note that Android does not require this additional config.)
You may also need to focus into the field with JavaScript directly; declare an ElementRef:
#ViewChild('elemName') yourField: ElementRef;
and then focus into its native element element:
this.yourField.nativeElement.focus();

Related

Automatic hover triggered on element with FastClick like implementation on iOS 8.1

I have created a simple FastClick implementation. Issue I will be describing occurs with FastClick but since it seems more like a browser bug, i decided to create non-FastClick version to represent the issue.
https://jsbin.com/fofaxiniya/1
Test this on iOS device or simulator running iOS 8.1 or up.
Scenario:
at least iOS 8.1 or up
A simple page with two buttons with active and hover states.
touchend handler that creates a synthetic click event and disables the original click event.
Steps to reproduce:
On the device or simulator,
Click on the first button
Click on the second button that removes itself from DOM on click
The hover state of first button gets triggered.
Why is this annoying?
Because of this weird behaviour, combination of FastClick and Single page application leads to some button randomly being hovered on navigation. Which is definitely unwanted behavior.
I am already considering removing all the hover styles from touch devices. But if I could actually target the problem itself, which is getting rid of the random hover from happenning, that would be great.
Any attempt to shed some light on this will be highly appreciated. :)

On iphone, safari, when typing in an input, the screen goes white

I've tested this on every other browser, it's only on iphone on safari where this is happening. I've built a site on wordpress and whenever a comment field is clicked on a comment, the screen goes white briefly. Cna someone point me in the right direction on how to diagnose this? Thanks!
http://texas-coffee-school.steadfastlight.com/is-inconsistency-killing-your-coffee-business-from-within/#comments To see. Thanks!
Found the answer: By applying position: relative on all the form objects, this fixes the issue iOS was having with the form fields.
Try pressing F12 on Google Chrome for developer tools and emulate the device (by clicking the phone icon and selecting the device required) that is causing the problems (e.g. Apple iPhone6), run the console while leaving a comment and it should display whatever Javascript is running in the background and debug from there.

Button Highlighting and Scroll Issue in Phonegap

I am New to Phonegap Development, I am Using jQuery mobile to create my UI. I have two Issues here,
Response of button for touch event is very slow. Why..?
I have Created a form with some elements like 2 Inputs text type, 2 Button one after another.
M problem is when I click on input, the keyboard popup makes the page move up, that's OK but when I press the keyboard resign button, the page stay little up.
Can you please help me out..!
and how to Optimize the responsiveness of JQuery mobile UI. I have completely avoided the images.
First, you can follow this link to remove the delay (300ms) from the click event.
And for the second one, i hope you are facing this issue for android. if so, then you need some changes to be done on the AndroidManifest.xml
Use below android property in application tag,
android:hardwareAccelerated="false"
android:windowSoftInputMode="adjustPan"
Will look something like
<application android:icon="#drawable/icon" android:label="#string/app_name"
android:hardwareAccelerated="false"
android:windowSoftInputMode="adjustPan">
This should resolve your issue.

Flex 4.6 TextInput Keyboard on iOS

I have migrated my app from Flex 4.5.1 to Flex 4.6 and the TextInput click event was broken so I do this « skinClass="spark.skins.mobile.TextInputSkin" » (like was suggest here http://help.adobe.com/en_US/flex/mobileapps/WS82181550ec4a666a39bafe0312d9a274c00-8000.html) and all seems work (tested in my Android and seems ok) but one user with iOS 5.1 complained that now the keyboard dont popup ?
Also complained for the TextArea that I dont have code in my extended component but also use the skin spark.skins.mobile.TextAreaSkin so the layout became similiar in my textinputs.
TextInput is broken in Flex 4.6
It doesn't scroll properly when default TextStageSkin is used
It causes some ugly artifacts when the TextStageSkin is used and keyboard resizes the view:
ugly flex TextInput bugs
It doesn't show proper keyboard type when TextInputSkin is used and softKeyboardType is set to something...
My guess this is a bug in AIR SDK, as there is noting in Flex SDK source which looks like it can be corrected. They gave us an SDK where none of the skins works properly. I hope Apache Flex will be much more mature. But again, this looks like an AIR issue to me.
GL.
Well, I had the opportunity to test a iPad 2 and using the TextInput with skin spark.skins.mobile.TextInputSkin, the events of flex works but does not open the keypad in iOS and with skin (stagetext new skin), keypad open in iOS (and with native access to spell check, etc ...) but do not run flex events. Since we do not need both situations simultaneously works (which fortunately it's my case for now).

turning off form assistant in mobile safari?

When running on a touchscreen device (iPhone, in my case, but I presume it does this on others), when the virtual keyboard pops up for a form field, there are added navigation buttons at the top of the keyboard: "previous", "next", "done". (And sometimes "autofill").
This is apparently the Mobile Safari "form assistant".
I find this redundant, superfluous, and confusing. iPhone users aren't used to this in native apps, and it's unnecessary. It's a touch device. You touch what you want to change. There's no need for navigation buttons!
I suppose users may be familiar with this, IF they use their device often to fill forms on websites. I've had an iPhone since the 3G, and never noticed this. I don't think I've ever filled a form on Mobile Safari! (I would use my desktop...)
The form assistant is there for navigating forms on websites, which might not be designed appropriately for a mobile device. So, in that context it serves a useful purpose.
But when using JQuery Mobile, you ARE designing an interface for use on a touchscreen mobile device. There shouldn't be a need for the form assistant. I find it particularly annoying in a local app (PhoneGap, Rhodes, etc.).
I've done some searches, and haven't come up with a solution.
Does anybody know how to turn this off?
sorry, its not possible to remove the Form Assistant inside mobile safari.
There is no solution for mobile Safari, but for PhoneGap there certainly is.
As of 2.6.0 there is an option in the config.xml
<preference name="HideKeyboardFormAccessoryBar" value="true" />
For versions before 2.6.0, or more sophisticated use, there is the KeyboardToolbarRemover, which even allows to dynamically show and hide the keyboardAcessoryView.
In your Javascript, include the module
var toolbar = cordova.require('cordova/plugin/keyboard_toolbar_remover');
To disable the toolbar
toolbar.hide()
To re-enable the toolbar
toolbar.show()

Resources