4 Replies Latest reply on Apr 3, 2015 5:05 AM by michpetrov

    ExtendedDataTable filter focus lost after opening modalpanel

    achildress

      I 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.

        • 1. Re: ExtendedDataTable filter focus lost after opening modalpanel
          michpetrov

          It would help if you cut the code down to the necessary parts (sscce.org). You can also check "document.activeElement" to see where is the focus switching to, it might be a problem in JavaScript but it's hard to tell.

          • 2. Re: ExtendedDataTable filter focus lost after opening modalpanel
            achildress

            Thank you Michal. Is this more concise? Also, an example test plan to explain the problem: 1) open a modalpanel ANYWHERE in my application. 2) navigate to the page shown below. 3) Place cursor in facilityCategoryDescription column filter textbox. 4) Type one character. 5) ExtendedDataTable filters successfully. 6) focus is no longer in the facilityCategoryDescription column filter textbox. I interrogated the DOM and determined that focus is on the BODY tag of the document at this point. I'm not seeing any javascript errors. All other filter textboxes for all extendedDataTables in my application are broken as well.

            I'm curious as to what specific behavior of a modalpanel would cause such a problem. Please let me know if cutting the code down more is necessary for an examination of this problem.

            Also, I'm using Internet Explorer 9 but forcing rendering of the pages in IE8 Standards, since IE9 Standards doesn't do very well with Richfaces 3.3.3.

             

            <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; }

                        /* rich:extendedDataTable: disable column resizing */

                        .extdt-hsep { display: none; }

                        /* rich:extendedDataTable: disable context menu */

                        .extdt-menu-div-on { visibility:hidden }

                    </style>

                      <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>

                                            <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 width="70%" id="facilityCategoryDescription" 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 id="activeFlag" 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>

                                        </td>

                                    </tr>

                                </table>

                               </rich:panel>

                        </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>

            • 3. Re: ExtendedDataTable filter focus lost after opening modalpanel
              achildress

              No ideas from anyone on this? I've tried switching to external filtering, but the same problem exists, just in a different form. Focus seems to be broken in a bizarre way after having opened a modal panel. I added the setCaretToEnd call as documented in other forum posts, but the caret appears in the textbox and focus is really on the HTML tag of the page at that point. Then if I click again in the textbox and try to type anything, no keystrokes are registered. By the way, this is only happening in IE9. It works fine in Firefox.

              • 4. Re: ExtendedDataTable filter focus lost after opening modalpanel
                michpetrov

                Can you replicate the issue on the RF 3 demo? If it is a browser issue there's not much to do, especially since IE9 was released after RF 3.