PDA

View Full Version : Infamous Firefox cursor bug - Info and possible workarounds



philip142au
4 Jan 2007, 8:25 PM
Hi,

I have a firefox browser and a IE browser, I have INPUT tag on form on a BasicDialog, but in firefox the cursor doesn't Flash when I click on the input box why?

Please help!

Thanks, Philip

brian.moeskau
4 Jan 2007, 9:58 PM
I believe this is a FF bug, at least according to Jack. Not sure if there is a solution to it or not.

soso
8 Mar 2007, 2:48 AM
Did anyone found a solution to this bug?

Thanks

schmidetzki
24 Mar 2007, 4:42 AM
It-s definitiv a FF bug.
The only solution I found is to position the dialog content "fixed".
Something like this:


<div>
<div class="x-dlg-hd ydlg-hd">no title</div>
<div class="x-dlg-bd ydlg-bd">
<div style="position:fixed">
... dialaog content
</div>
</div>
</div>

amitava
24 Mar 2007, 6:07 AM
I had also faced the similar problem working with yui-ext .33. After some investigating I somehow found that this only happens if shim:true, otherwise its fine. So here is my workaround tested in both FF 1.5 and 2. Not quite sure whether it is the right process.



function show_pm_msg(dlg, hwnd) {
/* to fix firefox cursor issue */
var useShim;
var ua = navigator.userAgent.toLowerCase();
if (ua.indexOf("msie") > -1){
useShim = true;
}else{
useShim = false;
}

if(!pm_msg_dlg){ // lazy initialize the dialog and only create it once
pm_msg_dlg = new YAHOO.ext.BasicDialog(dlg, {
autoTabs:true,
autoScroll: true,
resizable: true,
width:500,
height:350,
shadow:true,
minWidth:300,
minHeight:250,
shim:useShim, //only for ie
fixedcenter:true,
proxyDrag: true
});
pm_msg_dlg.addKeyListener(27, pm_msg_dlg.hide, pm_msg_dlg);
pm_msg_dlg.addButton('Close', pm_msg_dlg.hide, pm_msg_dlg);
pm_btn = pm_msg_dlg.addButton('Submit', reply_to_pm, pm_msg_dlg);
}
pm_msg_dlg.show(hwnd);
}

nhausig
28 Mar 2007, 1:28 AM
Using shim:false only helps in some situations. This bug is a firefox issue and many years old (see https://bugzilla.mozilla.org/show_bug.cgi?id=167801). I've tried many workarounds to no avail. Now there's a solution (see Comment #84). It is somehow ugly. You need a wrapper div around your text input with overflow set to auto and display to none. Then you set display to block after a short delay.



var inputWrapperDiv = ...;

if (YAHOO.ext.util.Browser.isGecko) {
inputWrapperDiv.style.display = 'none';
inputWrapperDiv.style.overflow = 'auto';
setTimeout(function() {inputWrapperDiv.style.display = 'block';}, 10);
}


If setting overflow to auto is resulting in scrollbars (resizing elements in wrapper div), you have to give the wrapper div some extra padding.

amitava
28 Mar 2007, 2:15 AM
Using shim:false only helps in some situations. This bug is a firefox issue and many years old (see https://bugzilla.mozilla.org/show_bug.cgi?id=167801). I've tried many workarounds to no avail. Now there's a solution (see Comment #84). It is somehow ugly. You need a wrapper div around your text input with overflow set to auto and display to none. Then you set display to block after a short delay.



var inputWrapperDiv = ...;

if (YAHOO.ext.util.Browser.isGecko) {
inputWrapperDiv.style.display = 'none';
inputWrapperDiv.style.overflow = 'auto';
setTimeout(function() {inputWrapperDiv.style.display = 'block';}, 10);
}


If setting overflow to auto is resulting in scrollbars (resizing elements in wrapper div), you have to give the wrapper div some extra padding.

Thanks nhausig for sharing your experience.

BTW, would you please explain a little bit about those other situations where using shim:false doesn't help? Thanks again.

Amitava

nhausig
28 Mar 2007, 2:39 AM
BTW, would you please explain a little bit about those other situations where using shim:false doesn't help? Thanks again.
Amitava

It won't help if there's another cause on the page, not just the shim iframe. The ff bug is about text input overlapping scrollable elements in general. It occurs when you have a text input overlapping a div that has overflow set to auto. There are other fixes than the js-delay-block solution but most of them have unwanted sideeffects and you cannot apply them in general. I stepped into this problem, because usually my apps have a document content area that is housed in a div with auto-overflow, because I want auto-scollbars for the document. Therefore all my modal dialogs with text-entry showed this problem.

Some interesting testcases from the mozilla bug site:

https://bugzilla.mozilla.org/attachment.cgi?id=98624
https://bugzilla.mozilla.org/attachment.cgi?id=245770
https://bugzilla.mozilla.org/attachment.cgi?id=187105

Jonathan Feinberg
24 Apr 2007, 11:03 AM
Here's a workaround that works for me, and gives you a nice, fat, blinking cursor in the text area:


Ext.MessageBox.getDialog().on("show", function(d) {
var div = Ext.get(d.el);
div.setStyle("overflow", "auto");
var text = div.select(".ext-mb-textarea", true);
if (!text.item(0))
text = div.select(".ext-mb-text", true);
if (text.item(0))
text.item(0).dom.select();
});

hunkybill
25 Apr 2007, 7:35 PM
@Jonathan Feinberg:

Nice. Worked fine for me, but was not really 'fat'!! Nice to finally see a cursor in the middle of a border layout dialog box again. That's the first thing people have bitched to me about, the dang missing cursors in form fields. Nested border layout + dialogs with forms is pretty much a standard necessary pattern for any decent application, and the fact that most INPUT elements over West, Center, or East regions are cursor-less due to CSS sucks big time. Funny how I thought after reading the Bugzilla reports - the solution was to enclose my INPUT elements in a container with overflow:auto. Oops.. me bad.

neongrau
10 May 2007, 12:21 AM
strange that the corresponding bugzilla entry was marked as verified fixed since over a year now. when even the attached testcases still show the bug in current versions.

i reopened that bug and requested verification. but that'll help for long term at best :S

thesilentman
10 May 2007, 4:35 AM
According to the FF people this will be fixed in 3.0 as it depends on other bugfixes that will also appear with 3.0. One could install 3.0 from the trunk to test it.

Bug report is here:
https://bugzilla.mozilla.org/show_bug.cgi?id=167801

EDIT: FYI, the bug report above is worth reading if you are having this issue as there is a lot of discussion with potential workarounds there as well. -Brian

lenzb
10 May 2007, 8:10 AM
Using shim:false only helps in some situations. This bug is a firefox issue and many years old (see https://bugzilla.mozilla.org/show_bug.cgi?id=167801). I've tried many workarounds to no avail. Now there's a solution (see Comment #84). It is somehow ugly. You need a wrapper div around your text input with overflow set to auto and display to none. Then you set display to block after a short delay.



var inputWrapperDiv = ...;

if (YAHOO.ext.util.Browser.isGecko) {
inputWrapperDiv.style.display = 'none';
inputWrapperDiv.style.overflow = 'auto';
setTimeout(function() {inputWrapperDiv.style.display = 'block';}, 10);
}
If setting overflow to auto is resulting in scrollbars (resizing elements in wrapper div), you have to give the wrapper div some extra padding.
I ran into this same problem and came up with a similar solution to what nhausig described. In my case, I found that a 10ms delay often wasn't sufficient. I found cases where the cursor wouldn't appear even after 300ms. I use a timeout of 500ms (I know, half a second is a long time), and haven't had this problem since.

crafter
8 Aug 2007, 6:06 AM
I'm experiencing a similar problem on Firefox 1.5

My situation is such:
I have a folder that receives a dialogue markup from a server


<div id='author_dialoge'>
<!-- Place holder for server generated detail form -->
</div>


The request to the server populates the div, which include a normal form:

<h2>Enter author Details</h2>

<form name="authordetails" id="authordetails" method="POST" action="<?= $action_url; ?>" onsubmit="return saveAuthorForm(<?= $id; ?>);">
<input type='hidden' name='id' id='id' value='<?= $id; ?>' >

<!-- The dialog is created from existing markup.
The inline styles just hide it until it created and should be in a stylesheet -->
<div id="author-dlg" style="visibility:hidden;position:absolute;top:0px;width;">
<div style="position:fixed">
<div class="x-dlg-hd">Contact Detaiils
</div>
<div class="x-dlg-bd">
<!-- Auto create tab 1 -->
<div class="x-dlg-tab" title="Hello World 1">
<!-- Nested "inner-tab" to safely add padding -->
<div class="inner-tab">

<div class="oneCol">
<label for="description" ><span>Id (Internal):</span>
<?= isset($id)?$id:''; ?></label>
</div>
<div class="twoCols">
<label for="title" ><span>Title:</span>
<input type='text' name='title' id='title' value='<?= $title; ?>' /></label>
<label for="firstname" ><span>Firstname:</span>
<input type='text' name='firstname' id='firstname' value='<?= $firstname; ?>' /></label>
<label for="surname" ><span>Surname:</span>
<input type='text' name='surname' id='surname' value='<?= $surname; ?>' /></label>
<label for="email" ><span>email:</span>
<input type='text' name='email' id='email' value='<?= $email; ?>' /></label>

<label for="byline" ><span>Byline :</span>
<textarea cols=35 rows=7 NAME='byline' id='byline' ><?= $byline; ?></textarea></label>
<label for="pic_url" ><span>Picture URL :</span>
<input type='text' name='pic_url' id='pic_url' value='<?= $pic_url; ?>' /></label>
<label for="homepage" ><span>Home Page URL:</span>
<input type='text' name='homepage' id='homepage' value='<?= $homepage; ?>' /></label>

<label for="designation" ><span>Designation :</span>
<input type='text' name='designation' id='designation' value='<?= $designation; ?>' /></label>
<label for="homepage" ><span>Home Page URL:</span>
<input type='text' name='homepage' id='homepage' value='<?= $homepage; ?>' /></label>
</div>
</div>
</div>


<!-- Auto create tab 2 -->
<div class="x-dlg-tab" title="HTML Editor">
<!-- Nested "inner-tab" to safely add padding -->
<div class="inner-tab">
<div class="twoCols">
<label for="login" ><span>Login Name:</span>
<input type='text' name='login' id='login' value='<?= $login; ?>' /></label>
<label for="password" ><span>Password:</span>
<input type='password' name='password' id='password' value='<?= $password; ?>' /></label>
<label for="active" ><span>Active? :</span>
<input type='checkbox' name='active' id='active' value='<?= $active; ?>' /></label>
<label for="admin_user" ><span>Privileged User?:</span>
<input type='checkbox' name='admin_user' id='admin_user' value='<?= $admin_user; ?>' /></label>
<label for="comments" ><span>Comments :</span>
<textarea cols=35 rows=7 NAME='comments' id='comments' ><?= $comments; ?></textarea></label>
</div>
</div>
</div>
</div>

</div>
</div>


<input type="submit" name="Submit" value="Save">
<input type="reset" name="resetForm" value="Clear Form">

</form>

I then invoke the dialogue:


<script>

AuthorDialog = function(){
// everything in this space is private and only accessible in the WysiWyg block

// define some private variables
var dialog, showBtn;
var sourcediv;

// return a public interface
return {

showDialog : function(){
// showBtn = Ext.get('show-dialog-btn');

if(!dialog){ // lazy initialize the dialog and only create it once
dialog = new Ext.BasicDialog("author-dlg", {
autoTabs:true,
width:600,
height:400,
shadow:true,
minWidth:300,
minHeight:250,
proxyDrag: true
});
dialog.addKeyListener(27, dialog.hide, dialog);
// dialog.addButton('Submit', dialog.hide, dialog).disable();
dialog.addButton('Submit',
function() {
// setHTMLEditorValue();
dialog.hide();
},
dialog);
dialog.addButton('Close', dialog.hide, dialog);
}
dialog.show();
}
};
};

AuthorDialog.showDialog();
</script>

This works fine, and the dialogue is displayed.

Howvere, certain fields dont seem to have focus.

I notice that sometimes using the right mouse button on a field will restore focus, but I can't train users to do this!

I I render the page without loading Ext, then I don't experience this problem, so I'm not convinced Firefox is the lone culprit here.

Can anyone suggest what I could try to solve this.

jack.slocum
8 Aug 2007, 9:25 AM
crafter, it is definitely a Firefox bug. Please give the forum some searches. There is a link to the Mozilla bug tracker with the bug (years old and still not fixed) and I have provided several workaround.

prophet
24 Sep 2007, 2:00 PM
Here's a workaround that works for me, and gives you a nice, fat, blinking cursor in the text area:


Ext.MessageBox.getDialog().on("show", function(d) {
var div = Ext.get(d.el);
div.setStyle("overflow", "auto");
var text = div.select(".ext-mb-textarea", true);
if (!text.item(0))
text = div.select(".ext-mb-text", true);
if (text.item(0))
text.item(0).dom.select();
});

This worked for me too! Thanks Jonathan Feinberg!

sjivan
25 Sep 2007, 4:59 PM
Was anything done in Ext to fix this? I see that the cursor is now appearing in the "Prompt" dialog example of Ext in Firefox. In some of my 1.1.1 examples however I still don't see a cursor. If I remember correctly, the prompt did previously did not show a cursor in FF.

Before I investigate further I am curious to know if some change was made in Ext to handle this?

Thanks,
Sanjiv

jsakalos
26 Sep 2007, 1:12 PM
Yes, there are some workarounds in Ext. Nevertheless, it's bug so it sometimes behaves unpredictable way. Hopefully they'll fix it in FF 3.

Alan Knowles
29 Sep 2007, 6:36 PM
This works for me.. - simple fix



.x-dlg {
position: fixed;
position:expression("absolute");
}

hunkybill
2 Oct 2007, 7:08 AM
This works for me.. - simple fix



.x-dlg {
position: fixed;
position:expression("absolute");
}


OMG: Wow. That did work. At one time or another, I have implemented each and every workaround to this problem. Depending on the alignments of the Moon and my ass, the workarounds would behave with varying degrees of success.. this one is so simple...can you explain how you derived this little ditty?

bill.marquette
6 Oct 2007, 2:45 PM
This seems to work with the 2.0.0a1 code and FF on OSX, haven't tested other browsers.

--Bill



.x-form-field {
position: fixed;
position:expression("absolute");
}

christocracy
16 Oct 2007, 8:00 PM
that fix won't work in practice.
try that on a ComboBox.

it seems that the "Knowles Fix" won't work when you attack from too low a level (ie: from teh field-level rather than the higher level of a window/dialog)

Yoris
18 Jun 2008, 6:16 AM
This seems to work with the 2.0.0a1 code and FF on OSX, haven't tested other browsers.

--Bill



.x-form-field {
position: fixed;
position:expression("absolute");
}


worked like a charm...
but not in windows, forms in window containers are damn hard to fix.... any sugg?

gaetan
4 Aug 2008, 1:42 AM
.x-form-cursor {
position: fixed;
}

And then in items in formpanel :



{
name: 'xx',
id: 'xx',
cls: 'x-form-cursor',
flieldLabel: 'Bla bla',
}

gaetan
4 Aug 2008, 1:58 AM
Sorry, not working everytime