PDA

View Full Version : [CLOSED] Focus on TextField breaks when using sencha.



ed.canas
15 Aug 2011, 9:02 PM
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.




<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

arthurakay
16 Aug 2011, 4:11 PM
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".

ed.canas
16 Aug 2011, 4:37 PM
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

arthurakay
16 Aug 2011, 10:07 PM
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.

ed.canas
16 Aug 2011, 11:40 PM
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

mitchellsimoens
17 Aug 2011, 9:15 AM
Have you tried doing this all with Sencha Touch code?

ed.canas
17 Aug 2011, 9:34 AM
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?

mitchellsimoens
17 Aug 2011, 10:03 AM
I don't think this is a Sencha Touch bug. I tried the following that works on Chrome but not my Android phone:


<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.

ed.canas
17 Aug 2011, 10:18 AM
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.

ed.canas
17 Aug 2011, 2:34 PM
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.




<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.




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

mitchellsimoens
17 Aug 2011, 4:31 PM
Can you try a third case... Make it just like the 2nd test case but just add the Sencha Touch JS and CSS code?

ed.canas
17 Aug 2011, 6:30 PM
I have created with sencha touch js and the css added, and same problem focus does not work.
http://www.oismobile.com/touch3.html

I've tried different ways already as far as firing the focus via a sencha button on different listening options. And it goes back to simply adding the js file where it breaks even a regular html button with a focus.

venumuvva
17 Oct 2011, 10:12 AM
Hi Guys,

We are also facing the text field focus issue. Wondering any body has any work around for the focus issue?

Appreciate your help on this.

Thanks in advance

rdougan
2 Nov 2011, 12:07 PM
I'm unsure why you guys are not just using Ext.get('id-of-input').focus() to do this? Also, why are you adding direct listeners using "onclick", and not using our API?

Rob

ed.canas
2 Nov 2011, 12:19 PM
Look at the thread, no matter what you use it will not work, we went back to basics to test the problem. It does not matter if you use Ext.get('id-of-input').focus() or any other derivative it will just not work. Can you look at the samples and test out. Since I have also an open ticket in support for over a Month and it has not been fixed either. The problem is that in Mobile Safari you cannot invoke a focus command. The only time you can do that is when it's initiated via a Touch Command. However Sencha captures all touch commands and re-sends them. There the original touch command is lost and focus will not work.

rdougan
2 Nov 2011, 1:16 PM
Have you tested it with Touch 2? I tested with ST2 and it works fine. I'll have Jacky our resident event guru to have a look-

Jacky Nguyen
2 Nov 2011, 1:50 PM
There was an old hack in Touch 1.x event manager to make click events happen instantly instead of having a default of 300ms delay, and this issue is a side-effect of that.

If you can't move to Touch 2 yet and have to stick with 1.x for a while, here's an (dirty but works) override. Put this right after the inclusion of sencha-touch.js.



Ext.gesture.Manager.onMouseEvent = Ext.emptyFn;
Ext.gesture.Manager.onTouchEnd = function(e) {
if (Ext.is.Blackberry) {
e.preventDefault();
}


if (this.isFrozen) {
return;
}


var gestures = this.currentGestures.slice(0),
ln = gestures.length,
i, gesture, endPoint,
needsAnotherMove = false,
touch = e.changedTouches ? e.changedTouches[0] : e;


if (this.startPoint) {
endPoint = Ext.util.Point.fromEvent(e);
if (!(this.lastMovePoint || this.startPoint)['equals'](endPoint)) {
needsAnotherMove = true;
}
}


for (i = 0; i < ln; i++) {
gesture = gestures[i];


if (!e.stopped && gesture.listenForEnd) {
if (needsAnotherMove) {
gesture.onTouchMove(e, touch);
}


gesture.onTouchEnd(e, touch);
}


this.stopGesture(gesture);
}




if (Ext.supports.Touch && this.isClick) {
this.isClick = false;
}


this.lastMovePoint = null;
this.followTouches = [];
this.startedChangedTouch = false;
this.currentTargets = [];
this.startEvent = null;
this.startPoint = null;
};

WallTearer
20 Jan 2012, 4:31 AM
Jacky Nguyen, are you sure that this is a correct solution?
I've pasted your code right after including the sencha lib, and it not only doesn't make the focus() functionality working, it also breaks the radio buttons (if I have several radio buttons, I can click only on one of them, and others are becoming unresponsive).

It's a very bad bug, and there're lots of folks having the same problem on this forum and on the Internet.
Didn't see anyone who said that he had successfully fixed it.

davide.cecconi
13 Jun 2012, 1:25 AM
IOS Focus problem it is on ver. 2.0.1 too

It 's no solve, I have open a tikect too

I hope that this BUG will solve as soon as possible because It is a big problem for application on IOS

Davide

olegtaranenko
2 Aug 2012, 10:41 PM
Someone added very promisingly notice
Success! Looks like we've fixed this one. According to our records the fix was applied for TOUCH-409 in 2.0.
at the top of topic. Wonderful!
Does he or she not forget saying when or what exact version ST 2.0 is? 2.0.1 has no fix. May be 2.0.1.1 or 2.0.2 which is accessible for subscribers only? Is it really fixed or only looks like ...

Thank for info

suzzer99
1 Nov 2012, 2:40 PM
We are seeing this same problem with Touch 2.1 beta 1. We want to automatically move the user from one form field to the next when they have entered the appropriate amount of characters (phone number broken into 3 fields).

It appears to me the fundamental problem, as has been pointed out in this thread, is that Apple only allows text fields to focus when initiated by a touch event. When I call myField.focus() from a button handler it works.

Unfortunately iOS5 doesn't seem to see the keyup event from one text field as a user input to focus another text field. My guess is that after the phone hides the virtual keyboard - the chain of command that the focus() call is coming from a touch event gets lost.

It would probably save a lot of us a lot of time and effort if this was just added to the docs for the textfield focus method. :)

=NR=
30 Sep 2013, 12:41 AM
still no fix/workaround for this issue ?

tried the textfield.focus() method, yet it doesn't work.. ~o)