Sencha Touch version tested:
  • 1.1 rev 1
Platform tested against:
  • iOS 5.0
  • iOS 5.1
Description:
  • ST is used with phonegap in hybrid mode.
  • A list with input fields in each row jumps when an input field is tapped.
  • When previous/Next buttons on the keyboard/numpad are used, the input field in focus goes out of the viewable area.
  • List auto scrolls sometimes when the Numpad is open/visible and when one tries to select/tap on a row
Test Case:

Code:
    <!DOCTYPE html><html><head>   <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0" />    <meta name="apple-mobile-web-app-capable" content="yes" />
    <title>Numbers</title>
    <link rel="stylesheet" type="text/css" href="sencha/resources/css/sencha-touch.css" />
    <script type="text/javascript" src="sencha/sencha-touch.js"> </script>
    <script type="text/javascript">
        Ext.onReady(function() {
                Ext.regModel('Numbers', {
                fields: ['number']
            });
            var store = new Ext.data.Store({
                model  : 'Numbers',
                data: [
                    {number: '01'},
                    {number: '02'},
                    {number: '03'},
                    {number: '04'},
                    {number: '05'},
                    {number: '06'},
                    {number: '07'},
                    {number: '08'},
                    {number: '09'},
                    {number: '10'},
                    {number: '11'},
                    {number: '12'},
                    {number: '13'},
                    {number: '14'},
                    {number: '15'},
                    {number: '16'},
                    {number: '17'},
                    {number: '18'},
                    {number: '19'},
                    {number: '20'},
                    {number: '21'},
                    {number: '22'},
                    {number: '23'},
                    {number: '24'},
                    {number: '25'},
                ]
            });
            var list = new Ext.List({
                itemTpl: '<input type="tel" value="{number}"></input>',
                fullscreen:true,
                store: store,
            });
            list.show();
        });
    </script>
</head>
<body>
</body>
</html>



Steps to reproduce the problem:
Problem 1: List jump
  • Tap in the input field
  • Tap next 10 times
  • Once you are at number 10, the focus from 10 to 11 moves the input field out of the viewable area
  • From 11 to 12 the list comes back to the original position.
  • This keeps happening as one moves down or up in the list
  • The list keeps jumping as previous or next is clicked
Problem 2: Input field out of viewable area
  • Scroll to the bottom of the list
  • Select the last entry, i.e. 25
  • Tap previous multiple times
  • List Scrolls till #15 and then the focus goes to the field which is out of viewable area
Problem 3: Auto scrolling (Not consistently reproducible)
  • Follow steps in Problem 2
  • Once the focused field is out of viewable area tap anywhere in the list
  • The list will jump to the original scroller offset, i.e scrolled all the way to the bottom of the list and then start auto scrolling to the top (scrolling is not consistent though, but the list jumps every time)

The result that was expected:
  • The input field in focus should remain in the viewable area
The result that occurs instead:
  • Explained above