Thank you for reporting this bug. We will make it our priority to review this report.
  1. #1
    Ext JS Premium Member
    Join Date
    Oct 2010
    Posts
    103
    Vote Rating
    6
    abierbaum is on a distinguished road

      0  

    Default [OPEN-689] Form focus and virtual keyboard issues on iPhone

    [OPEN-689] Form focus and virtual keyboard issues on iPhone


    Sencha Touch version tested:
    • 1.0.2
    • sencha-touch.css

    Platform tested against:
    • iOS 4
    • Chrome

    Description:
    • There is a section of code in our application where the user has data on a main panel allowing them to edit certain fields of their records. On the same page they can press a button to create a new record. When they do that, we pop up a float with a form in it to allow them to fill in initial values. This code all works fine, but Safari seems to get a bit confused and consider the form items in the non-modal section of the interface as editable.

      This shows in two ways.

      1) The user can click on "previous" and "next" on the virtual keyboard and go to fields that should not be editable (behind the modal area)

      2) The virtual keyboard stays up even after the user clicks on the ok button for the form panel that popped up.

    Test Case:

    Code:
    <html>
      <head>
        <title>Bug Test</title>
        <link rel="stylesheet" href="deps/sencha_touch/resources/css/sencha-touch.css" type="text/css"/>
        <script type="text/javascript" src="deps/sencha_touch/sencha-touch-debug-w-comments.js"></script>
    </head>
    <body>
    <script type="text/javascript">
    Ext.setup({
       onReady: function() {
        var panel = new Ext.Panel({
            fullscreen: true,
            dockedItems: [
                {
                   dock : 'top',
                   xtype: 'toolbar',
                   title: 'Float Form Bug'
                },
                {
                   xtype: 'formpanel',
                   dock: 'top',
                   items: [{
                       xtype: 'textfield',
                       label: 'name',
                       name:  'name',
                       placeHolder: 'name here'
                   }]
                }
            ],
        html: 'Bug where keyboard does not go away on iPhone and ' +
              'user can go prev/next to other items outside the modal area.'
       });
    
       var form = new Ext.form.FormPanel({
          modal: true,
          hideOnMaskTap: false,
          floating: true,
          centered: true,
          draggable: false,
    
          items: [
             {
                xtype: 'textfield',
                label: 'Data',
                name: 'data'
             }
          ],
    
          dockedItems: [{
             xtype: 'toolbar',
             dock: 'bottom',
             items: [
                {
                   xtype: 'button',
                   text: 'Ok',
                   handler: function() { form.hide(); }
                },
             ]
          }]
       });
    
       form.show('pop');
    }
    });
    </script>
    </body>
    </html>

    The result that was expected:

    I would like to see the virtual keyboard go away and the modal panel be the only section with fields the user can get to.

    As a workaround, if I could close the virtual keyboard from code that would help with the main usability issue.

  2. #2
    Ext JS Premium Member
    Join Date
    Oct 2010
    Posts
    103
    Vote Rating
    6
    abierbaum is on a distinguished road

      0  

    Default


    Am I the only one seeing this? If so, does anyone see something wrong with the example code?

  3. #3
    Sencha User gcallaghan's Avatar
    Join Date
    Apr 2010
    Location
    Cupertino, Ca
    Posts
    247
    Vote Rating
    0
    gcallaghan is on a distinguished road

      0  

    Default


    I've seen something similar on android, where I have a field on a card that is not visible, which can be selected "through" a horizontal tab bar docked to the bottom of the screen. I don't have a workaround yet though. :-(

  4. #4
    Sencha User
    Join Date
    Jun 2011
    Posts
    15
    Vote Rating
    0
    Old McStopher is on a distinguished road

      0  

    Default


    @abierbaum and @gcallaghan, I'm glad I'm not the only one seeing this.

    I have a searchfield that keeps setting focus when it's not even visible. Another active tab has a toolbar that when tapped, fires both its action and the set focus of the searchfield in the hidden tab.

    I've tried hiding/disabling and showing/enabling at different listener points, but to no avail.

    My only workaround thus far is to actually move the back button on the offending toolbar so that it physically does not reside in the same 2d space as the hidden searchfield.

  5. #5
    Sencha User
    Join Date
    Jun 2011
    Posts
    15
    Vote Rating
    0
    Old McStopher is on a distinguished road

      0  

    Default


    Any fixes yet?

  6. #6
    Sencha User
    Join Date
    Jun 2011
    Posts
    15
    Vote Rating
    0
    Old McStopher is on a distinguished road

      0  

    Default


    Okay, I finally came up with a less-than-ugly workaround. In my parent TabPanel, I set up listeners to disable/enable the searchfield when it comes in/out of view to prevent it from being pressed even when hidden behind another panel.

    Code:
            beforecardswitch: function(container, newCard, oldCard, index) {
                // component2 is another tab that covers mySearchBar's container
                if (newCard == component2) {
                    mySearchBar.disable();
                }
            },
            cardswitch: function(container, newCard, oldCard, index) {
                // component1 is the tab in which mySearchBar is displayed
                if (newCard == component1) {  
                    mySearchBar.enable();
                }
            }

Similar Threads

  1. Virtual Keyboard, how to ?
    By bartolomiew in forum Ext GWT: Discussion
    Replies: 6
    Last Post: 14 Feb 2013, 10:47 AM
  2. [OPEN-678] YESNOCANCEL Issues on iPhone 3G
    By planewryter in forum Sencha Touch 1.x: Bugs
    Replies: 1
    Last Post: 12 Oct 2011, 1:18 AM
  3. Replies: 4
    Last Post: 23 Jan 2011, 9:12 PM
  4. How do we close the iphone keyboard and submit form in RC1?
    By profunctional in forum Sencha Touch 1.x: Discussion
    Replies: 2
    Last Post: 17 Nov 2010, 5:19 AM

Thread Participants: 2

Tags for this Thread

Turkiyenin en sevilen filmlerinin yer aldigi xnxx internet sitemiz olan ve porn sex tarzi bir site olan mobil porno izle sitemiz gercekten dillere destan bir durumda herkesin sevdigi bir site olarak tarihe gececege benziyor. Sitenin en belirgin ozelliklerinden birisi de Turkiyede gercekten kaliteli ve muntazam, duzenli porno izle siteleri olmamasidir. Bu yuzden iste. Ayrica en net goruntu kalitesine sahip adresinde yayinlanmaktadir. Mesela diğer sitelerimizden bahsedecek olursak, en iyi hd porno video arşivine sahip bir siteyiz. "The Best anal porn videos and slut anus, big asses movies set..." hd porno faketaxi