PDA

View Full Version : [FIXED] [4.1.0 b3] Focus lost when error tooltip displayed on modal window/form



westy
24 Feb 2012, 3:00 AM
REQUIRED INFORMATION
Ext version tested:

Ext 4.1.0 beta 3
Browser versions tested against:

Firefox 10.0.2
DOCTYPE tested against:

Default
Description:

Focus on a control can be lost without any clicking from the user, making form's very frustrating to use.
Steps to reproduce the problem:

Set focus on a field that has an error, e.g. textbox with no content and allowBlank set to false.
Mouse over the control so that get the error tooltip.
Mouse over another control on the form.
The result that was expected:

focus should be retained on the original control.
The result that occurs instead:

Focus is lost.
Test Case:
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>LoadMask Testing</title>


<!-- Ext includes -->
<script type="text/javascript" src="/ext4.1/ext-all-debug.js"></script>


<!-- CSS -->
<link rel="stylesheet" href="/ext4.1/resources/css/ext-all.css" type="text/css">


<script type="text/javascript">
Ext.onReady(function() {


Ext.create('Ext.window.Window', {
width: 250,
modal: true,
items: [
{
xtype: 'form',
defaults: {
xtype: 'textfield'
},
items: [
{
name: 'field1',
fieldLabel: 'Field1',
allowBlank: false
},
{
fieldLabel: 'Field2'
}
]
}
],
listeners: {
show: {
fn: function(component) {
var form = component.down('panel').getForm();
form.isValid();
form.findField('field1').focus(undefined, 200);
}
}
}
}).show();


});
</script>


</head>
<body>
</body>
</html>

HELPFUL INFORMATION
Debugging already done:

None yet.
Possible fix:

not provided
Operating System:

Windows 7 Professional 64-bit


Grrr, your bug reporting template is annoying... there has to be a better way, or it needs updating so is easier to use...

Cheers,
Westy

mitchellsimoens
24 Feb 2012, 12:45 PM
Thanks for the report. Happened to me in Chrome 17 also.

lsdriscoll
27 Feb 2012, 1:20 AM
Please see my original post on this.

Probably needs tweaking for beta 3. works for beta 2

http://www.sencha.com/forum/showthread.php?182658-Ext-JS-4.1-Beta-3-is-Now-Available&p=742908&viewfull=1#post742908

westy
29 Mar 2012, 12:17 AM
Still there in RC1, but focus is lost when the tooltip disappears rather than when it appears, as I think was the case in beta 3.

So, still bloody annoying!

westy
3 Apr 2012, 7:35 AM
Seems this happens with any tooltip, very annoying indeed.

Am looking for a fix now, in the absence of any movement on the bug...

mitchellsimoens
3 Apr 2012, 7:41 AM
Seems this happens with any tooltip, very annoying indeed.

Am looking for a fix now, in the absence of any movement on the bug...

Would invite you to open a ticket at support.sencha.com if you would require a workaround now.

westy
3 Apr 2012, 8:03 AM
Ha, yeah... have requested a new support subscription gets bought, and it's been approved.

I'd rather have a new SDK than a fix to this bug, which I will fix myself I hope.

Rest assured, once I have an active support sub again I will be raising a ticket against the many SDK issues, since all other avenues are being met with indifference...

westy
3 Apr 2012, 8:05 AM
Interestingly, if you use the test case, mouse over the field and just leave it, focus also goes when the QuickTip times out...

westy
3 Apr 2012, 8:53 AM
After lots and lots of going up and down the codebase and lots of overrides, and commenting out of different bits, I have finally tracked down the phantom focus stealer to ZIndexManager, namely the _setActiveChild method.

It is listening to the hide event that is fired from Component's afterHide method.

A test case with the offending line commented out.


<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Ext Testing</title>




<!-- Ext includes -->
<script type="text/javascript" src="/ext4.1/ext-all-debug.js"></script>




<!-- CSS -->
<link rel="stylesheet" href="/ext4.1/resources/css/ext-all.css" type="text/css">




<script type="text/javascript">


Ext.require('Ext.ZIndexManager',
function() {
Ext.override(Ext.ZIndexManager, {


_setActiveChild: function(comp, oldFront) {
Ext.global.console.info('_setActiveChild', comp, oldFront);


var front = this.front;
if (comp !== front) {


if (front && !front.destroying) {
front.setActive(false, comp);
}
this.front = comp;
if (comp && comp != oldFront) {
// With this commented out focus is not stolen...
// comp.setActive(true);
if (comp.modal) {
this._showModalMask(comp);
}
}
}
},


});
}
);


Ext.onReady(function() {




Ext.create('Ext.window.Window', {
width: 250,
modal: true,
items: [
{
xtype: 'form',
defaults: {
xtype: 'textfield'
},
items: [
{
name: 'field1',
fieldLabel: 'Field1',
allowBlank: false
},
{
fieldLabel: 'Field2'
}
]
}
],
listeners: {
show: {
fn: function(component) {
var form = component.down('panel').getForm();
form.isValid();
form.findField('field1').focus(undefined, 200);
}
}
}
}).show();




});
</script>




</head>
<body>
</body>
</html>


The issue I have now, is that I assume that setActive call is needed somewhere, just not in this case.
So the question is, how do we stop it in this case?

Probably one for Nige... I'll try PMing him and see if I get lucky :)

Westy

Animal
3 Apr 2012, 5:53 PM
You called? ;)

Yes, setActiveChild focuses the child. That is usually wanted when a floater is activated... for instance your own Window there.

There is a preventFocusOnActivate config.

Which I suppose should really default to true on the ToolTip class since 95% of the time, they will not need focus.

I'll create a ticket for this.

Animal
3 Apr 2012, 5:53 PM
Ah, Mitch got there before me. I'll assign that to myself.

westy
4 Apr 2012, 12:04 AM
Thanks for the speedy response, much appreciated!

That's exactly the kind of input I needed, can workaround it now until the fix goes in.

Thanks,
Westy

westy
4 Apr 2012, 12:23 AM
Hmm, trying to override now, and setActive is being called on the Window, not the QuickTip.

Will keep digging...

westy
4 Apr 2012, 12:29 AM
Ok, it's a hack, and look forward to your better solution, but it works for now.



Ext.require('Ext.ZIndexManager',
function() {
Ext.override(Ext.ZIndexManager, {
_setActiveChild: function(comp, oldFront) {
var front = this.front;
if (comp !== front) {


if (front && !front.destroying) {
front.setActive(false, comp);
}
this.front = comp;
if (comp && comp != oldFront) {
if (!(oldFront instanceof Ext.tip.ToolTip)) {
comp.setActive(true);
if (comp.modal) {
this._showModalMask(comp);
}
}
}
}
},


});
}
);


Cheers,
Westy

westy
12 Jul 2012, 2:13 AM
Focus still getting stolen by error tooltips in 4.1.1, so leaving my override in place for now.

raphaelbohrer
16 Jul 2012, 9:33 AM
Good job.

TY!