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.