Salesforce1 Ionic application (IOS keyboard not working)


#1

I have an application that is used on the Salesforce1 platform. The biggest issue I have right now is IOS only the keyboard is not working on any inputs.

Unfortunately since this is an app inside of another cordova app I do not have access to load the custom keyboard for Ionic so my question is… Is there a way to disable the custom keyboard for Ionic and fall back to the standard cordova keyboard?


#2

You can, if you remove the plugin and add the standard cordova keyboard. But what do you mean it doesn’t work with your inputs? Could you explain?


#3

Salesforce1 is a cordova application hosted threw the Salesforce platform. Basically you get to publish pages (web single page app) that are enabled inside of the Salesforce1 app as a tab. So my application is basically just one view of the app so I don’t have root access to what cordova does or doesn’t load.

Sorry for the short description but on IOS any text inputs will open the virtual keyboard and scroll the view to the current text input but when you type nothing happens and no characters so in the input. Looking into the keyboard util I think it is either keyboardInit() or keyboardShow()

function keyboardInit() {
or
function keyboardShow(element, elementTop, elementBottom, viewportHeight, keyboardHeight) {


#4

And let me add it appears to work fine on Android as well as Desktop. The issue is Mobile Safari only but on all devices I have tested so far iPhone 5 iPhone 4s and iPad 2.


#5

Ah alright. Yeah unfortunately I don’t have too much experience with Salesforce1, you may want to ask around on Stackoverflow and see if there are any tips over there.


#6

I’m having the same issue. Just wanted to add that on iOS devices it’s happening in the Salesforce1 app, Safari and Chrome.


#7

I am experiencing the same issue and I am getting frustrated since I have been trying different approaches to workaround this issue and I don’t seem to find a suitable solution. I have used several css styles around the input control to see if I can solve the situation but I have not get any luck.

input[type=‘text’], input[type=‘email’], input[type=‘search’],
input[type=‘password’], textarea
{
-webkit-user-select: text;
-webkit-appearance: textfield;
}

I tried as well to isolate the issue placing the input element alone inside a form but even then I have problems in the iPad only (Chrome and safari in my windows environment works fine)…

Any help would be greatly appreciated!!!

[UPDATE] : after verifying that in fact the ionic.css is the culprit ( I removed it and then the input field started working normally in the iPad)… I try to follow all the styles defined by the stylesheet to see which one is causing the issue. It looks like it boils down to the -webkit-appearance set to none somewhere in the ionic.css… But for some reason overriding it directly in my page as I show above is not resetting the value to “textfield” as it should be… Any idea why? How can I override the “none” with the “textfield”?

Thanks!


#8

I’m not sure it is CSS related.

On my application I have sub views with inputs “if” (and that’s a big if) the keyboard / input auto detects and opens the keyboard then the input does work. However you can only use the next prev arrows of the IOS keyboard to navigate to other inputs. If you try to tap another input it will not work and you must navigate off the view and come back then once again if the auto detect of the input works you can type.

I’ve debugged a bit off the ionic bundle and it has some init functions for tap and keyboard events which is how the keyboard scroll is setup. The best I can tell is ionic and sfdc both set up tap and keyboard events that are clashing with each other.

If you look threw the ionic bundle keyboard section there is a isIOS that changes the defualt events fired. I’m pretty sure this is where the issue is.


#10

Ok I think using Matt advice I got some success on this issue. I work around it adding a line of code for the iPad device in the “tapIgnoreEvent” to avoid the events all together in this device. I am pretty sure that might get me in trouble with other controls but for now is my only feasible solution to get the edit inputs working in the tablet. the line I added looks like this:

if( ionic.Platform.isIPad() && ionic.tap.isLabelWithTextInput(e.target) ){
return true;
}

That ensure the tapStart/tapEnd combinations won’t get processed in the iPad… that works for me for now but I still have questions for the ionic team about why this issue might be happening and what suggestions they have to get a more suitable solution solution.

Thanks for the comments!

Jorge.


#11

The problem is I don’t think this is a question for Ionic but a question for Salesforce. SFDC is injecting their own code before Ionic gets to load so I would assume unless SFDC changes the javascript events this is the only solution (editing ionic.bundle.js).

Can you provide a video of the working input? I’d like to see what you where able to get working.


#12

Hi Matt…

Unfortunately I couldn’t find a way to record a video to show you what I had achieved, but I still keep spinning wheels with this issue… The success I had probe to be only momentary… the textbox works fine when I tap the first time on it and type but after I add a button to the screen and tap the button coming back to the text box will not show characters anymore. I have to navigate away from the page and or hide the keyboard and focus the textbox back again to get the text to start working again… seems like a problem after losing focus… :frowning:

Any more ideas? I am kind of stucked… I have tried different debug options to see if I can figure out the real problem… I check the other js libraries that SFDC loads for the salesforce1 apps and they don’t seem to be doing any type of effect or wiring on additional events that might affect ionic… but I can’t debug directly in the iPad (I don’t have a Mac) to see if there is another library that I haven’t seen from my browser debugging.

Any additional help would be greatly appreciated!

Jorge.


#13

Hi… For anybody using SF1 with ionic I want to give them some heads up on our findings so far. VF pages in SF1 are run within an iframe and the ionic library has some known issues working in this type of configuration. I started a discussion related to this situation and it brought up a previous post that had already talked about it.

The solution described works to solve the edit problem and some scrolling glitches that I noticed with ionic in SF1. So, far the library is holding and we are continuing developing our solution with this framework (even though we were considering moving to angular-mobile… but it seemed much more limited than ionic)…

I will keep everybody posted to see if this great library is a good fit for the Salesforce 1 community… .I am pretty sure there are many people out there interested on this combination.

Have a good day.