Worklight 6.0.0.1 and iOS 7 Keyboard

Question

I'm using Worklight 6.0.0.1 Enterprise Edition and updating an existing app to work with iOS7. The application is built on Dojo and specifically is making use of the dojox/app framework.

One issue is causing me a lot of difficulty, namely the keyboard. In our application some of the views have input text fields. In prior versions of iOS when a user clicks in a text field the view is scrolled up to show the input that is in focus while the user types.

In iOS 7 the keyboard just appears on screen. The view is not scrolled upward and if the input field is toward the bottom of the screen it is covered over by the keyboard. To make matters worse, if the keyboard covers a field it loses focus, meaning that all fields near the bottom of the screen cannot be manipulated. One workaround I discovered is to set the height in the meta tag:

<meta content="height=device-height, width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0" name="viewport">

This works well until I change to landscape orientation on the device. When I open and close the keyboard in portrait mode the screen does not re-adjust back to the correct size and the dojox/mobile/ScrollableView (containing all of the content) remains pushed upward. There is a blank panel underneath where the keyboard was.

Thinking that it may be something to do with our application I attempted a test with a new Worklight application. I created a new project and added some text in the body of the main HTML file along with an input text field at the bottom. The result was similar to the scenario above. In this case the view is pushed upward and the dojox/mobile/ScrollableView that contains the content is pushed up too far. There is a blank panel between the scrollable view and the keyboard.

I have seen a number of keyboard and scrolling related threads including suggestions to configure the settings in config.xml: KeyboardShrinksView, HideKeyboardFormAcccessoryBar, and DisallowOverscroll. None of these have solved the problems.

Unfortunately I cannot post screenshots to show you exactly what I'm seeing (not enough reputation points), but here is the body of the very simple test application I mentioned above:

<body id="content" style="display: none;">
    <div data-dojo-props="selected:true" data-dojo-type="dojox.mobile.ScrollableView" id="view0">
            <!--application UI goes here-->
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
            <br />
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
            <br />
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
            <br />
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
            <br />
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
            <br />
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
            <br />
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
            <br />
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
            <br />
            <input data-dojo-type="dojox/mobile/TextBox"></input>
        </div>
    <script src="js/initOptions.js"></script>
        <script src="js/KeyboardTest.js"></script>
        <script src="js/messages.js"></script>
</body>

I'd greatly appreciate any suggestions or nods in the right direction.

Thanks, Chris

We had this problem, except that the keyboard was pushing up our tabbar and blocking our fields. The way we got around this for now is to compile using xcode4.6 with iphone 6 sdk — tik27, Oct 15 '13 at 19:06
Also, did the top answer here help you: http://stackoverflow.com/questions/18970865/ios-7-input-elements-moving-fixed-positioned-elements — Nathan H, Oct 16 '13 at 10:21
I've tried it without Dojo and yes, on the trivial example above it does work correctly. By default, a new Worklight project with the built-in Dojo library surrounds the content in the body with a ScrollableView and as soon as this is done everything breaks. It definitely seems to be related but I don't think the conclusion should be that Dojo isn't supported on Worklight if you're using iOS 7.... Regarding the answer to the question you linked to, no it didn't help unfortunately. I'd tried that before. — Chris La Pat, Oct 16 '13 at 13:07
From what I've seen, the reason why it doesn't work with Dojo Mobile ScrollableView while it works without Dojo is that Dojo relies on focus events for updating the scroll position. Hence, the lack of auto-scroll when taping a field would be a side-effect of the lack of focus events (see https://issues.apache.org/jira/browse/CB-5115 ). — Adrian Vasiliu, Oct 18 '13 at 12:15

Adrian Vasiliu · Answer 1 · 2013-10-22T16:35:12.570

1

EDIT: this answer holds for Cordova 3.1 and Dojo 1.9.1+.

In my second round of experiments and tests with Cordova 3.1 on iPhone and iPad under iOS 7, the following did the trick:

Do not define height: device-height in the meta tag, while adding to your input elements (not necessarily Dojo widgets) a listener for "click" events, say

<input onclick="onInputClick(event);" data-dojo-type="dojox/mobile/TextBox">

or

<input onclick="onInputClick(event);">

and define the function as follows:

onInputClick = function(e){
    e.target.focus();
};

Explanation and some remarks:

When height:device-height is not present in the meta tag, there is no "focus" event when you tap an input field (adding the device-height fixes that, but creates the side-effect in landscape orientation). Differently, when navigating from an input field to another using the previous/next arrows on the top of the keyboard, the focus event is emitted.
The focus event is used by the Dojo mobile scrollable container to adjust the scrolling such that that the field is visible once the keyboard is shown. Since there's no focus event when taping the input field, this adjustment is not done...
Note that the Cordova 3.1 documentation states: "iOS 7 issues: Remove the values "width=device-width, height=device-height" from your meta tag "viewport" attribute' (http://cordova.apache.org/docs/en/3.1.0/guide_platforms_ios_upgrading.md.html#Upgrading%20iOS). From that it would seem that not using height:device-height is anyway recommended by Cordova. However, https://issues.apache.org/jira/browse/CB-4862 seems to imply that height:device-height should be set for iOS 7... Definitely, the changes introduced by iOS 7 are still producing much pain.
For Dojo Mobile, the issue is tracked in https://bugs.dojotoolkit.org/ticket/17505.

edited Oct 22 '13 at 16:35

answered Oct 16 '13 at 16:51

Adrian Vasiliu

396
1
5

I reproduced the trouble in Cordova 3.1 with the input focus on iOS 7 without Dojo and I submitted https://issues.apache.org/jira/browse/CB-5115. – Adrian Vasiliu Oct 18 '13 at 12:18
Hi Adrian. Thanks for the links and thank you for opening the bug report! Unfortunately even the workaround you posted doesn't work with Worklight. I tested that code and in landscape orientation the keyboard appears and immediately disappears when I click on an input. The input gets focus but as soon as the keyboard starts to rise focus is given to the body. WL isn't using Cordova 3.1 so maybe the workaround you suggest won't work for now. – Chris La Pat Oct 21 '13 at 13:51
Ok, I will test using your version of WL and Cordova. Just to be sure, you are getting this misbehavior while still using the code you posted in your initial question, right? Also, is there anything relevant in the KeyboardTest.js that your code imports? – Adrian Vasiliu Oct 22 '13 at 09:28
Indeed, the workaround code that I provided relies on code that has been introduced in Dojo 1.9.1 thus only holds for Dojo 1.9.1 or later, while WL 6.0.0.1 ships with Dojo 1.9.0. BUT, according to my test, simply upgrading the Dojo version to 1.9.1 is enough for fixing the problem with WL 6.0.0.1! – Adrian Vasiliu Oct 22 '13 at 16:28
(continued) For my testing, I've used a defaut WL Dojo project (including the width=device-width in the meta tag), only changing the orientation support such that the app turns in landscape. To change the Dojo version: install http://download.dojotoolkit.org/release-1.9.1/dojo-release-1.9.1-src.zip on your disk, then: New Worklight Project > Dojo Installation > New Dojo Library > On Disk. Let me know if this works for you... – Adrian Vasiliu Oct 22 '13 at 16:33
I have tested again with the latest iOS update (7.0.3): the picture is unchanged (same as with 7.0.2). – Adrian Vasiliu Oct 23 '13 at 11:41
Correction: the same workaround is in fact also needed when upgrading the Cordova project generated by WL 6.0.0.1 to use Dojo 1.9.1. It looked unnecessary at a first sight because the simple upgrade procedure relying on the hybrid project creation wizard of WL Studio has apparently a trouble, leading to Dojo classes not being found, while the result is visually close with just a ScrollableView containing text and input fields. So far, for upgrading Dojo to 1.9.1, I think you should rather physically replace yourself the dojo directory of the project with a built version of Dojo 1.9.1. – Adrian Vasiliu Oct 24 '13 at 07:43
Concerning the upgrade procedure for the Dojo version in WL, from what I understood you need to rebuild dojo layers matching those present in the version shipped with WL. If you want to follow this path and you have troubles with the upgrade process, I suggest you enter a distinct question about it. – Adrian Vasiliu Oct 24 '13 at 14:09

Worklight 6.0.0.1 and iOS 7 Keyboard

1 Answers1