Results 1 to 6 of 6

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

    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

    Default [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

    • 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:

        <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>
    <script type="text/javascript">
       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(); }

    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


    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
    Cupertino, Ca


    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


    @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


    Any fixes yet?

  6. #6


    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.

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

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

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts