Looks like we can't reproduce the issue or there's a problem in the test case provided.
  1. #1
    Touch Premium Member
    Join Date
    Oct 2010
    Posts
    93
    Vote Rating
    1
    ed.canas is on a distinguished road

      0  

    Default Focus on TextField breaks when using sencha.

    Focus on TextField breaks when using sencha.


    I know this has been talked about before I've looked at some post but it seems that when I load the sencha js file the focus stops working. Here is a small sample that is only using basic HTML.

    A quick test you will see that focus does not work in Mobile Safari.

    However removing the sencha-touch.js script focus works as expected when you click on the buttons, this is what desired function.


    Code:
     <html>
        <head>
            <meta charset="UTF-8" />
            <title>TEST</title>
    
            <script type="text/javascript" src="sencha-touch.js"></script>
    
        </head>
        <body>    
            <input type="text" id="test"><br>
            <button onclick="document.getElementById('test').focus();">focus</button>
            <button onclick="document.getElementById('test').blur();">blur</button>
            <div id="button2container"></div>
            <script type="text/javascript">
            var button = document.createElement('button');
            button.innerHTML = 'focus (dynamic)';
            button.onclick = function() {document.getElementById('test').focus();};
            document.getElementById('button2container').appendChild(button);
    
    
            var button2 = document.createElement('button');
            button2.innerHTML = 'focus (timeout)';
            var focusFn = function() {
                document.getElementById('test').focus();
            };
            button2.onclick = function() {
                window.setTimeout(focusFn, 1);
            };
            document.getElementById('button2container').appendChild(button2);
            </script>
        </body>
    </html>

    How can this be fixed, since it is working without sencha touch js file.

    Any ideas?

    Thanks,
    Ed

  2. #2
    Sencha - Services Team arthurakay's Avatar
    Join Date
    Sep 2008
    Location
    Antioch, IL
    Posts
    1,369
    Vote Rating
    35
    arthurakay is a jewel in the rough arthurakay is a jewel in the rough arthurakay is a jewel in the rough

      0  

    Default


    I'm assuming that you use some sort of onReady() method to launch your touch code. Could you simple focus on the text box from there?

    I'll have to investigate further on the root of the issue to give you the answer of "why".
    Arthur Kay
    Developer Relations Manager, Sencha Inc.

    Twitter | Sencha Chicago User Group

  3. #3
    Touch Premium Member
    Join Date
    Oct 2010
    Posts
    93
    Vote Rating
    1
    ed.canas is on a distinguished road

      0  

    Default


    Yes my Sencha Touch code uses the onReady feature, and focus does not work no matter where it gets initiated from, either a touch start or click event. Ounce you add the sencha js file focus will no longer work, no matter how you try to do it.

    I just removed everything from my original sencha code and created a basic sample to illustrate that by just adding the js file it will break focus after button press on mobile safari. From my understanding mobile safari focus works as long as it's initiated from a touch even, like a button click.

    Try the code above and by simple removing the sencha js file, the focus will work in mobile safari.

    I did noticed that when using sencha and I tried to set focus, it will actually clear placeHolder text and looks like it was starting to do the focus but it never finishes.

    Thanks,
    Ed

  4. #4
    Sencha - Services Team arthurakay's Avatar
    Join Date
    Sep 2008
    Location
    Antioch, IL
    Posts
    1,369
    Vote Rating
    35
    arthurakay is a jewel in the rough arthurakay is a jewel in the rough arthurakay is a jewel in the rough

      0  

    Default


    Ok, so if I understand you correctly, you're only seeing this issue in Safari Mobile?

    It works fine for me in OSX 10.6.8 in both Chrome and Safari, but obviously that's not the browser in which you're noting the problem. I'm not familiar enough with the specifics of that browser so I can't tell you if the issue is a bug or not.

    I'm obviously not the person who needs to help you here. If you haven't done so already, please submit a ticket to support.sencha.com where the issue can be properly escalated. Once you've done that, I can try to apply some pressure to get you an answer.
    Arthur Kay
    Developer Relations Manager, Sencha Inc.

    Twitter | Sencha Chicago User Group

  5. #5
    Touch Premium Member
    Join Date
    Oct 2010
    Posts
    93
    Vote Rating
    1
    ed.canas is on a distinguished road

      0  

    Default


    Yes the issues is only when running this on an iPad or iPhone with safari browser, other than that it works fine on desktop safari. I guess enter this as a bug?

    Thanks,
    Ed

  6. #6
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,347
    Vote Rating
    846
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    Have you tried doing this all with Sencha Touch code?
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  7. #7
    Touch Premium Member
    Join Date
    Oct 2010
    Posts
    93
    Vote Rating
    1
    ed.canas is on a distinguished road

      0  

    Default


    Yes, I initially started with Sencha Code and kept removing code until all I was left with was the sencha JS file. I tried via a sencha button and initiating the focus from different listeners, click, touchstart... but all have the same problem it fails to focus, so it seems that by just adding a sencha JS file it breaks the focus feature on mobile safari.

    Any ideas?

  8. #8
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,347
    Vote Rating
    846
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      -1  

    Default


    I don't think this is a Sencha Touch bug. I tried the following that works on Chrome but not my Android phone:

    Code:
    <html>
    <head>
        <title>Sencha Touch Test</title>
        
        <script type="text/javascript">
        
        focusIt = function() {
            setTimeout(function() {
                var text = document.getElementById('focusMe');
                
                text.focus();
            }, 2000);
        }
        
        </script>
    </head>
    <body onload='focusIt()'>
    
    <input type='text' id='focusMe'>
    
    </body>
    </html>
    The field just won't focus. Need to do some Google searching but doesn't look like for mobile devices that they support the focus function.
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  9. #9
    Touch Premium Member
    Join Date
    Oct 2010
    Posts
    93
    Vote Rating
    1
    ed.canas is on a distinguished road

      0  

    Default


    From my understanding at least on iOS you can only initiate a focus from a touch event. So my scenario I click on the button to start focus the text field. So update your test code to include a button that executes the focusIt() function. That should work on fine iOS and probably android as well.

  10. #10
    Touch Premium Member
    Join Date
    Oct 2010
    Posts
    93
    Vote Rating
    1
    ed.canas is on a distinguished road

      0  

    Default


    I've created two scripts to show how focus behaves both Android and iOS devices.

    1st Page you can test here http://www.oismobile.com/focus.html
    This one has sencha js file on it.. and none of the focus buttons will work even if initiated via a button/touch event.

    Code:
    <html>
    <head>
        <title>Sencha Touch Test</title>
        <script type="text/javascript" src="sencha-touch.js"></script>
        
        <script type="text/javascript">
        
        focusIt = function() {
            var text = document.getElementById('focusMe');
            text.focus();
        }
        
        focusItTimeout = function() {
            setTimeout(function() {
                focusIt();
            }, 2000);
        }
    
    
        focusItTimeout2 = function() {
            setTimeout(focusIt, 2000);    
        }
        
        focusIt5 = function() {
            document.getElementById('focusMe').focus();
        }
        
        Ext.setup(
        {
            onReady: function() {
                focusIt();
            }
        });
        
        </script>
    </head>
    <body>
    
    
    <input type='text' id='focusMe'>
    <br/>
    <input type='button' onclick="focusIt()" value="Start Focus2 w/ No Timeout (DOES NOT Work)" /><br/>
    <input type='button' onclick="focusItTimeout()" value="Start Focus w/ Timeout (Does Not Work)" /><br/>
    <input type='button' onclick="focusItTimeout2()" value="Start Focust /w Timeout2 (Does Not Work)" /><br/>
    
    
    </body>
    </html>

    2nd Page you can test here http://www.oismobile.com/focus2.html
    This is simple html with no sencha js file on it.. only the first button which calls focusIt will work, which is how is supposed to be. As long as you initiate a focus via a touch event it will work. Tested on both Android and iOS browsers. However the same does not apply when you do a set a timeout using the same code, which is what the last 2 buttons do.

    I seems that if you do a settimeout you probably loose information as to where the event is coming from and safari and android just ignore the focus because it does not have the proper events on the focus call.

    I'm not that familiar with the sencha touch internal code, so I'm suspecting it's probably listening all all touch events and just re-creating them in which case the result would be the same you loose the initial touch event coming from the button.


    Code:
    <html>
    <head>
        <title>Sencha Touch Test</title>
        <script type="text/javascript">
        
        focusIt = function() {
            var text = document.getElementById('focusMe');
            text.focus();
        }
        
        focusItTimeout = function() {
            setTimeout(function() {
                focusIt();
            }, 2000);
        }
    
    
        focusItTimeout2 = function() {
            setTimeout(focusIt, 2000);    
        }
        
        focusIt5 = function() {
            document.getElementById('focusMe').focus();
        }
        
        </script>
    </head>
    <body>
    
    
    <input type='text' id='focusMe'>
    <br/>
    <input type='button' onclick="focusIt()" value="Start Focus2 w/ No Timeout (Works)" /><br/>
    <input type='button' onclick="focusItTimeout()" value="Start Focus w/ Timeout (Does Not Work)" /><br/>
    <input type='button' onclick="focusItTimeout2()" value="Start Focust /w Timeout2 (Does Not Work)" /><br/>
    
    
    </body>
    </html>