ExtendedDataTable filter focus lost after opening modalpanel
achildress Mar 31, 2015 1:33 PMI have an unusual problem that I can replicate consistently but makes no sense to me. Given the following facelet, if I use the filtering option of the extendedDataTable, it works just fine with the cursor staying in the filter text box after each keystroke. But, once I show and then hide a modalpanel (anywhere in my application, not just on the same page as the extendedDataTable), then focus no longer stays in the filtering text box when a key is pressed. What is it about having shown a modalpanel that is effectively breaking the filtering of extendedDataTables EVERYWHERE in my application?
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:a4j="http://richfaces.org/a4j"
xmlns:rich="http://richfaces.org/rich"
xmlns:custom="http://doc/jsf/custom"
template="pagetemplate.xhtml">
<ui:define name="content">
<style type="text/css">
/* rich:extendedDataTable: next two styles cause horizontal scrollbar when needed */
.extdt-content {
height: 100% !important;
}
.extdt-innerdiv {
top: 0px;
left: 0px;
position: absolute;
overflow-x:hidden !important;
overflow-y:auto !important;
}
.even-row {
background-color: #FCFFFE;
}
.odd-row {
background-color: #ECF3FE;
}
.extdt-empty-cell {
width: 1;
}
th.extdt-empty-cell {
width: 1;
}
.extdt-hsep {
/* rich:extendedDataTable: disable column resizing */
display: none;
}
/* rich:extendedDataTable: disable context menu */
.extdt-menu-div-on {
visibility:hidden
}
</style>
<script type="text/javascript">
var isChoice = 0;
function callAlert(Msg,Title){
txt = Msg;
caption = Title;
vbMsg(txt,caption);
if (isChoice == 6) return true;
return false;
}
</script>
<script type="text/VBScript">
Function vbMsg(isTxt,isCaption)
testVal = MsgBox(isTxt,4,isCaption)
isChoice = testVal
End Function
</script>
<h:form id="facilitycategoryform">
<rich:panel id="facilitycategoryformpanel" width="98%">
<f:facet name="header">Facility Categories</f:facet>
<rich:panel id="rpanel1" style="margin-top: 10px;">
<f:facet name="header">
<a4j:outputPanel id="tablecount">
<table width="98%">
<tr>
<td align="right" class="rightText">Total Number of Facility Categories Found: #{FacilityCategoryActionBean.rowsShowing}</td>
</tr>
</table>
</a4j:outputPanel>
</f:facet>
<table align="center" width="96%" cellpadding="0" cellspacing="0">
<tr>
<td align="right">
<rich:spacer height="30px"></rich:spacer>
<a4j:commandLink status="majorstatus" ajaxSingle="true" limitToList="true" reRender="mpsource, mpheader" actionListener="#{FacilityCategoryActionBean.newFacilityCategory}" oncomplete="javascript:Richfaces.showModalPanel('genericmp',{width:660, height: 200, top:300, left:200});" styleClass="linkText" value="Add New Facility Category">
<a4j:actionparam name="modalPanel" value="facilitycategory.xhtml" assignTo="#{MenuBean.modalPanel}"/>
<a4j:actionparam name="modalPanelHeader" value="Add Facility Category" assignTo="#{MenuBean.modalPanelHeader}"/>
<a4j:actionparam name="reRender" value="tablecount,facilitycategorylist,includederrors" assignTo="#{MenuBean.reRender}"/>
</a4j:commandLink>
<rich:spacer width="14px"></rich:spacer>
</td>
</tr>
<tr>
<td>
<a4j:queue name="qFilter" ignoreDupResponses="true" size="1" requestDelay="600" sizeExceededBehavior="dropNext"/>
<rich:spacer height="12px"></rich:spacer>
<rich:extendedDataTable eventsQueue="qFilter" rowClasses="even-row,odd-row" reRender="tablecount,dscroller1" noDataLabel="No Facility Categories Found" height="420px" id="facilitycategorylist" rows="8" var="SelFacilityCategoryBean" value="#{FacilityCategoryActionBean.facilityCategories}">
<rich:column sortable="false" width="4%">
<f:facet name="header">
<h:graphicImage value="../images/magnifytrans.png" style="border: none;"></h:graphicImage>
</f:facet>
<a4j:commandLink status="majorstatus" title="View Facility Category" actionListener="#{FacilityCategoryActionBean.selectFacilityCategory}" ajaxSingle="true" limitToList="true" reRender="mpsource, mpheader" oncomplete="javascript:Richfaces.showModalPanel('genericmp',{width:660, height: 200, top:300, left:200});">
<a4j:actionparam name="modalPanel" value="facilitycategoryview.xhtml" assignTo="#{MenuBean.modalPanel}"/>
<a4j:actionparam name="modalPanelHeader" value="View Facility Category" assignTo="#{MenuBean.modalPanelHeader}"/>
<a4j:actionparam name="reRender" value="includederrors" assignTo="#{MenuBean.reRender}"/>
<h:graphicImage value="../images/magnifytrans.png" style="border: none;"></h:graphicImage>
</a4j:commandLink>
</rich:column>
<rich:column sortable="false" width="4%">
<f:facet name="header">
<h:graphicImage value="../images/penciltrans.png" style="border: none;"></h:graphicImage>
</f:facet>
<a4j:commandLink status="majorstatus" title="Edit Facility Category" actionListener="#{FacilityCategoryActionBean.selectFacilityCategory}" ajaxSingle="true" limitToList="true" reRender="mpsource, mpheader" oncomplete="javascript:Richfaces.showModalPanel('genericmp',{width:660, height: 200, top:300, left:200});">
<a4j:actionparam name="modalPanel" value="facilitycategory.xhtml" assignTo="#{MenuBean.modalPanel}"/>
<a4j:actionparam name="modalPanelHeader" value="Update Facility Category" assignTo="#{MenuBean.modalPanelHeader}"/>
<a4j:actionparam name="reRender" value="facilitycategorylist,includederrors" assignTo="#{MenuBean.reRender}"/>
<h:graphicImage value="../images/penciltrans.png" style="border: none;"></h:graphicImage>
</a4j:commandLink>
</rich:column>
<rich:column sortable="false" width="4%">
<f:facet name="header">
<h:graphicImage value="../images/trashtrans.png" style="border: none;"></h:graphicImage>
</f:facet>
<a4j:commandLink status="majorstatus" title="Delete Facility Category" onclick="if (!callAlert('Do you really want to delete this facility category?','Delete Facility Category')){ return false; }" actionListener="#{FacilityCategoryActionBean.deleteFacilityCategory}" ajaxSingle="true" limitToList="true" oncomplete="makeErrors('facilitycategoryform:maximumSeverity');" reRender="tablecount,facilitycategorylist,includederrors">
<h:graphicImage value="../images/trashtrans.png" style="border: none;"></h:graphicImage>
</a4j:commandLink>
</rich:column>
<rich:column width="70%" sortBy="#{SelFacilityCategoryBean.facilityCategory.facilityCategoryDescription}" filterBy="#{SelFacilityCategoryBean.facilityCategory.facilityCategoryDescription}" filterEvent="onkeyup" filterValue="#{FacilityCategoryActionBean.facilityCategoryDescription}">
<f:facet name="header">
<h:outputText value="Facility Category" style="white-space: normal; display: inline-block;"/>
</f:facet>
<h:outputText value="#{SelFacilityCategoryBean.facilityCategory.facilityCategoryDescription}"/>
</rich:column>
<rich:column width="8%" sortBy="#{SelFacilityCategoryBean.activeFlagDisplay}" filterBy="#{SelFacilityCategoryBean.activeFlagDisplay}" filterEvent="onkeyup" filterValue="#{FacilityCategoryActionBean.activeIndicator}">
<f:facet name="header">
<h:outputText value="Active" style="white-space: normal; display: inline-block;"/>
</f:facet>
<h:outputText value="#{SelFacilityCategoryBean.activeFlagDisplay}"/>
</rich:column>
</rich:extendedDataTable>
<h:panelGrid id="mygrid" width="100%" columns="1" border="0" cellpadding="0" cellspacing="0" style="margin-top: 6px; background-color: #c6c6c6;">
<rich:datascroller status="majorstatus" binding="#{FacilityCategoryActionBean.dataScroller}" renderIfSinglePage="false" page="#{FacilityCategoryActionBean.listPage}" id="dscroller1" for="facilitycategorylist">
</rich:datascroller>
</h:panelGrid>
<a4j:commandButton action="#{FacilityCategoryActionBean.resetFilter}" value="Reset Current Filtering" reRender="tablecount,facilitycategorylist,dscroller1" ajaxSingle="true" limitToList="true"/>
</td>
</tr>
</table>
</rich:panel>
<ui:include src="errors.xhtml"/>
<script type="text/javascript">
makeErrors("facilitycategoryform:maximumSeverity");
</script>
</rich:panel>
</h:form>
<rich:modalPanel id="genericmp" minHeight="240" minWidth="450" zindex="2000">
<f:facet name="header">
<a4j:outputPanel id="mpheader">
<h:outputText value="#{MenuBean.modalPanelHeader}"/>
</a4j:outputPanel>
</f:facet>
<a4j:include id="mpsource" viewId="#{MenuBean.modalPanel}"/>
</rich:modalPanel>
</ui:define>
</ui:composition>
I have been struggling with this for some time now. I found a couple of posts that sort of discuss this problem, but not the exact problem I'm experiencing.
I'm using Richfaces 3.3.3 Final. I know that the extendedDataTable has been improved in Richfaces 4, but upgrading is not an option in my shop right now. If you can shed some light on why this behavior is happening after opening a modalpanel, or have some solution to this problem, I thank you in advance for your assistance.