I have a set of text inputs and I would like to open a dialog when one gains focus, and closes the dialog when the input loses focus. This all seems straightforward and works fine in Chrome, but has problems in IE, as opening the dialog causes the text input to lose focus, which immediately closes the dialog again. The dialog doesn't contain any inputs, so nothing in there gets the focus either...
The bindings are simple enough, something like the following simplified version (assuming that props.$dialog is a reference to the dialog object).
$('#foo .input-text')
.focus(function (e) {
props.$dialog.dialog('open');
})
.blur(function (e) {
props.$dialog.dialog('close');
});
As mentioned, this works fine in Chome, but IE8 drops the focus on the text input.
If it's of any relevance, the dialog contains a Farbtastic colour picker, which is used to change the colour value in the selected dialog.
So, if it wasn't clear from the above; is there any way to stop the focus being lost? I have tried binding to the dialog open event and using stopPropagation() on the event, but this hasn't helped.