problem with tab key in popup-panel
Hi,
in my application I am using a rich:popupPanel to show a question to the user. When I use a commandButton to show the popupPanel then hit a Cancel-Button in the panel to hide it then finally hit again the commandButton to show the popupPanel everything will work as I want it to. That is the first textfield I want to be focused is focused and when I use the tab-key to traverse the other elements it works fine as well.
At last I am going to describe the problem after that long introduction:
When I dont open the popupPanel twice but try to use the tab key after the first time showing it, then the focus jumps with the first hit to an browser-element instead of traversing the other elements of my web page.
PS: this happens in all bowsers I tested, except google chrome. However its supposed to work fine in any browser.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:a4j="http://richfaces.org/a4j"
xmlns:rich="http://richfaces.org/rich">
<f:view>
<h:head>
<title>HOB Web File Access</title>
<script>
function presentAddServerConfirmed(confirmed)
{
if(document.getElementById("addServerForm:serverAlias").value.length > 0) {
document.getElementById("confirmedLabel_debug").innerHTML = confirmed;
window.status='authentication confirmed: ' + confirmed;
if(confirmed) {
document.getElementById("wrongPasswordLabel").innerHTML = "";
#{rich:component('addServerPopup')}.hide();
} else {
document.getElementById("wrongPasswordLabel").innerHTML = "Wrong Password!";
}
} else {
document.getElementById("wrongPasswordLabel").innerHTML = "";
}
}
function exitAddServerForm()
{
document.getElementById("wrongPasswordLabel").innerHTML = "";
document.getElementById("addServerForm:serverAlias").value="";
document.getElementById("addServerForm:userName").value="";
document.getElementById("addServerForm:password").value="";
#{rich:component('addServerPopup')}.hide();
}
// forward enter/escape key press
function submitEnterEscape(myEnterSubmit, myEscapeSubmit, myEvent) {
var keyCode;
if (window.event) {
keyCode = window.event.keyCode;
} else if (myEvent) {
keyCode = myEvent.which;
} else {
return true;
}
// if enter was pressed
if (keyCode == 13) {
document.getElementById(myEnterSubmit).click();
return false;
}
// if escape was pressed
if (myEvent.keyCode == 27) {
document.getElementById(myEscapeSubmit).click();
return false;
}
return true;
}
</script>
</h:head>
<h:body>
<h:form>
<p id="confirmedLabel_debug">This is a paragraph.</p>
<a4j:commandButton value="Call the popup"
onclick="#{rich:component('addServerPopup')}.show();" />
<a4j:outputPanel id="out">
<h:outputText value="Servers: #{serverBean.servers} !" />
</a4j:outputPanel>
</h:form>
<!-- Add Server Panel -->
<rich:popupPanel id="addServerPopup" modal="true" autosized="true"
onshow="#{rich:element('addServerForm:serverAlias')}.focus();">
<!-- Title -->
<f:facet name="header">
<h:outputText value="Add Server" />
</f:facet>
<!-- closing dialog -->
<f:facet name="controls">
<h:outputLink
onclick="document.getElementById('addServerForm:cancelButton').click();">
X
</h:outputLink>
</f:facet>
<h:form id="addServerForm"
onkeypress="submitEnterEscape('addServerForm:okButton', 'addServerForm:cancelButton', event);">
<p id="wrongPasswordLabel"></p>
<!-- Input Fields -->
<h:panelGrid columns="3" width="100%">
<h:outputLabel for="userName" value="Username: " />
<h:inputText id="userName" required="true"
value="#{addServerBean.userName}">
<rich:validator />
</h:inputText>
<rich:message for="userName" />
<h:outputLabel for="password" value="Password: " />
<h:inputSecret id="password" required="true" redisplay="false"
value="#{addServerBean.password}">
<rich:validator />
</h:inputSecret>
<rich:message for="password" />
</h:panelGrid>
<a4j:commandButton id="okButton" value="Add Server"
render="password,out"
actionListener="#{addServerBean.addServerListener}"
onbeforedomupdate="presentAddServerConfirmed(event.data)"
data="#{addServerBean.confirmed}" />
<a4j:commandButton id="cancelButton" value="Cancel"
onclick="exitAddServerForm();" immediate="true" render="@form" />
</h:form>
<!-- end of: Input Fields -->
</rich:popupPanel>
<!-- end of: Add Server Panel -->
</h:body>
</f:view>
</html>
