ICEfaces
  1. ICEfaces
  2. ICE-10529

ace:dataTable - filter focus lost on update

    Details

    • Type: Bug Bug
    • Status: Closed
    • Priority: Major Major
    • Resolution: Fixed
    • Affects Version/s: EE-3.3.0.GA_P02, 4.0
    • Fix Version/s: EE-4.0.0.GA, EE-3.3.0.GA_P03, 4.1
    • Component/s: ACE-Components
    • Labels:
      None
    • Environment:
      Firefox, Chrome, IE11

      Description

      In a filter enabled ace:dataTable, the focus is lost when deleting characters from the filter input field. Upon loss of focus, using the backspace yet will return the user to the previous page.

      This happens with the 'change' and 'keyup' filter events. When deleting characters in the field, if there new data to be shown, the focus is lost.

        Activity

        Hide
        Arran Mccullough added a comment -

        Attached test case that shows the issue.

        Steps:

        • load intro.jsf
        • Click the Welcome button (redirect used to show the backspace key issue).
        • In the second column filter input enter in '111'. No data is shown.
        • Using the backspace key, remove a single character so it shows '11', no data is shown and focus is kept in the field.
        • Delete another character using the backspace key, it should show '1' now. A new set of data is returned but the input field no longer has focus.
        • Hit the backspace key again, you are now navigated to intro.jsf.
        Show
        Arran Mccullough added a comment - Attached test case that shows the issue. Steps: load intro.jsf Click the Welcome button (redirect used to show the backspace key issue). In the second column filter input enter in '111'. No data is shown. Using the backspace key, remove a single character so it shows '11', no data is shown and focus is kept in the field. Delete another character using the backspace key, it should show '1' now. A new set of data is returned but the input field no longer has focus. Hit the backspace key again, you are now navigated to intro.jsf.
        Hide
        Mircea Toma added a comment -

        Added client IDs for thead and tbody elements to stop the update from propagating up to root element (this occurs when table transition from being empty to a table has rows to render).

        Show
        Mircea Toma added a comment - Added client IDs for thead and tbody elements to stop the update from propagating up to root element (this occurs when table transition from being empty to a table has rows to render).
        Hide
        Liana Munroe added a comment - - edited

        Verified using attached test case. ICEfaces 4 trunk, ee-3.3.0 maintenance branch r44177. Tomcat 7, IE 11, FF 34, Chrome 40.

        Show
        Liana Munroe added a comment - - edited Verified using attached test case. ICEfaces 4 trunk, ee-3.3.0 maintenance branch r44177. Tomcat 7, IE 11, FF 34, Chrome 40.
        Hide
        Liana Munroe added a comment -

        Reopening for failures in QA test apps which use a global filter or match modes.
        The QA Filter test app is failing in the method described in ICE-10362 which was closed because of failure to reproduce the issue.
        The issue "When removing filter letters using the "Backspace" key, sometimes the focus changes from the filter input component to the page, and the user is redirected to previously viewed pages." Can be reproduced in the following manner:
        Use the dataTable > Filter test app (/views/filterTest.jsf) located at:
        http://dev.icesoft.com/svn/repo/qa/trunk/Regression-Icefaces4/Sparkle/Nightly/dataTable
        In the iTunes filter type 10000
        Use the backspace key. Focus can become lost, at that point the you will be sent back to the start page.

        Note* This issue also occurs in the /views/globalFilter.jsf test application but you must use the global filter first

        Show
        Liana Munroe added a comment - Reopening for failures in QA test apps which use a global filter or match modes. The QA Filter test app is failing in the method described in ICE-10362 which was closed because of failure to reproduce the issue. The issue "When removing filter letters using the "Backspace" key, sometimes the focus changes from the filter input component to the page, and the user is redirected to previously viewed pages." Can be reproduced in the following manner: Use the dataTable > Filter test app (/views/filterTest.jsf) located at: http://dev.icesoft.com/svn/repo/qa/trunk/Regression-Icefaces4/Sparkle/Nightly/dataTable In the iTunes filter type 10000 Use the backspace key. Focus can become lost, at that point the you will be sent back to the start page. Note* This issue also occurs in the /views/globalFilter.jsf test application but you must use the global filter first
        Hide
        Mircea Toma added a comment -

        In DataTableRenderer enclose inline script code with 'span' element which has its ID attribute defined so that eventual changes in code will not force the update to propagate to the root element.

        Show
        Mircea Toma added a comment - In DataTableRenderer enclose inline script code with 'span' element which has its ID attribute defined so that eventual changes in code will not force the update to propagate to the root element.
        Hide
        Liana Munroe added a comment -

        Tested with ICEfaces 4 trunk, ee-3.3.0 maintenance branch r44181.
        The focus and navigation issue does appear resolved however now when filters are removed the paginator is not reinstated.
        To reproduce:
        Use the dataTable > Filter test app (/views/filterTest.jsf) located at:
        http://dev.icesoft.com/svn/repo/qa/trunk/Regression-Icefaces4/Sparkle/Nightly/dataTable
        The demo loads with a paginator on the dataTable.
        Type B into the Name field.
        The table is reduced to 2 rows.
        Press backspace to remove B from the name field.
        The table is reloaded but without the paginator.

        Show
        Liana Munroe added a comment - Tested with ICEfaces 4 trunk, ee-3.3.0 maintenance branch r44181. The focus and navigation issue does appear resolved however now when filters are removed the paginator is not reinstated. To reproduce: Use the dataTable > Filter test app (/views/filterTest.jsf) located at: http://dev.icesoft.com/svn/repo/qa/trunk/Regression-Icefaces4/Sparkle/Nightly/dataTable The demo loads with a paginator on the dataTable. Type B into the Name field. The table is reduced to 2 rows. Press backspace to remove B from the name field. The table is reloaded but without the paginator.
        Hide
        Mircea Toma added a comment -

        Changed paginator.js to update the visibility of paginator markup when the number of available rows is higher than the ones displayed.

        Show
        Mircea Toma added a comment - Changed paginator.js to update the visibility of paginator markup when the number of available rows is higher than the ones displayed.
        Hide
        Liana Munroe added a comment -

        Verified all issues ICEfaces 4 trunk r44183, Tomcat 7, FF 34, Chrome 40, IE 11.
        Issues remain with ee-3.3.0 maintenance branch r44184:
        1.) Paginator fix has not been applied.
        2.) New js error in browser console:
        FF:TypeError: tbl.setupClickableHeaderEventsForColumn is not a function filterTest.jsf (line 20, col 27)
        Chrome: Uncaught TypeError: undefined is not a function
        IE 11: SCRIPT438: Object doesn't support property or method 'setupClickableHeaderEventsForColumn'

        Show
        Liana Munroe added a comment - Verified all issues ICEfaces 4 trunk r44183, Tomcat 7, FF 34, Chrome 40, IE 11. Issues remain with ee-3.3.0 maintenance branch r44184: 1.) Paginator fix has not been applied. 2.) New js error in browser console: FF:TypeError: tbl.setupClickableHeaderEventsForColumn is not a function filterTest.jsf (line 20, col 27) Chrome: Uncaught TypeError: undefined is not a function IE 11: SCRIPT438: Object doesn't support property or method 'setupClickableHeaderEventsForColumn'
        Hide
        Mircea Toma added a comment - - edited

        Applied paginator fix to maintance branch.
        Also applied a fix to the dataTable application by changing the widgetVar attribute name in filterTest.xhtml page. It seems that the commit for ICE-10055 made the data table component sensitive to what name is assigned to 'widgetVar' attribute. If the name matches the id attribute value then on the client the root element is looked up when invoking setupClickableHeaderEventsForColumn function instead of the data table instance.

        Show
        Mircea Toma added a comment - - edited Applied paginator fix to maintance branch. Also applied a fix to the dataTable application by changing the widgetVar attribute name in filterTest.xhtml page. It seems that the commit for ICE-10055 made the data table component sensitive to what name is assigned to 'widgetVar' attribute. If the name matches the id attribute value then on the client the root element is looked up when invoking setupClickableHeaderEventsForColumn function instead of the data table instance.
        Hide
        Liana Munroe added a comment -

        Verified remaining issues resolved ICEfaces ee-3.3.0 maintenance branch, ICEfaces 4 trunk r 44184. Tomcat 7, FF 34, IE 11, Chrome 40.

        Show
        Liana Munroe added a comment - Verified remaining issues resolved ICEfaces ee-3.3.0 maintenance branch, ICEfaces 4 trunk r 44184. Tomcat 7, FF 34, IE 11, Chrome 40.
        Hide
        Liana Munroe added a comment - - edited

        Tested with ICEfaces 4 trunk r44210/ICEfaces ee-3.3.0 r 44213
        Reopening for possible regressions.
        Showcase ace:columnGroup > Overview failing.
        QA test apps failing
        dataTable > /views/alternatingRowStyleTest.jsf, /dataTable/views/ICE-10055.jsf
        With r44173 the application functions as expected. After the changes made for ICE-10529 using this demo causes a NPE.
        Steps to reproduce
        1.) Use QA test app dataTable/views/alternatingRowStyleTest.jsf
        2.) Click on Artist column header once
        3.) Click on Album column header once
        4.) Click on Name column header once or twice
        5.) Click on any of the unsortable column headers such as AMG, Pitchfork etc. NPE occurs at this time.
        Mar 13, 2015 9:44:16 AM com.sun.faces.context.AjaxExceptionHandlerImpl handlePar
        tialResponseError
        SEVERE: java.lang.NullPointerException
        at org.icefaces.ace.util.ComponentUtils.resolveField(ComponentUtils.java
        :123)
        at org.icefaces.ace.model.table.SortCriteria.<init>(SortCriteria.java:36
        )
        at org.icefaces.ace.component.datatable.DataTable.getSortCriteria(DataTa
        ble.java:1139)
        at org.icefaces.ace.component.datatable.DataTable.loadLazyData(DataTable
        .java:1452)
        at org.icefaces.ace.component.datatable.DataTable.visitRowsAndExpandedRo
        ws(DataTable.java:1613)
        at org.icefaces.ace.component.datatable.DataTable.visitTree(DataTable.ja
        va:1516)
        at javax.faces.component.UIComponent.visitTree(UIComponent.java:1700)
        at javax.faces.component.UIForm.visitTree(UIForm.java:362)
        at javax.faces.component.UIComponent.visitTree(UIComponent.java:1700)
        at javax.faces.component.UIComponent.visitTree(UIComponent.java:1700)
        at org.icefaces.impl.event.RestoreResourceDependencies.processEvent(Rest
        oreResourceDependencies.java:48)
        at javax.faces.event.SystemEvent.processListener(SystemEvent.java:108)
        at javax.faces.event.ComponentSystemEvent.processListener(ComponentSyste
        mEvent.java:118)
        at com.sun.faces.application.ApplicationImpl.processListeners(Applicatio
        nImpl.java:2169)
        at com.sun.faces.application.ApplicationImpl.invokeListenersFor(Applicat
        ionImpl.java:2142)
        at com.sun.faces.application.ApplicationImpl.publishEvent(ApplicationImp
        l.java:301)
        at com.sun.faces.application.ApplicationImpl.publishEvent(ApplicationImp
        l.java:245)
        at javax.faces.component.UIComponentBase.encodeBegin(UIComponentBase.jav
        a:856)
        at javax.faces.component.UIViewRoot.encodeBegin(UIViewRoot.java:985)
        at javax.faces.component.UIComponent.encodeAll(UIComponent.java:1854)
        at com.sun.faces.application.view.FaceletViewHandlingStrategy.renderView
        (FaceletViewHandlingStrategy.java:430)
        at com.sun.faces.application.view.MultiViewHandler.renderView(MultiViewH
        andler.java:133)
        at javax.faces.application.ViewHandlerWrapper.renderView(ViewHandlerWrap
        per.java:337)
        at com.sun.faces.lifecycle.RenderResponsePhase.execute(RenderResponsePha
        se.java:120)
        at com.sun.faces.lifecycle.Phase.doPhase(Phase.java:101)
        at com.sun.faces.lifecycle.LifecycleImpl.render(LifecycleImpl.java:219)
        at javax.faces.webapp.FacesServlet.service(FacesServlet.java:647)
        at org.apache.catalina.core.ApplicationFilterChain.internalDoFilter(Appl
        icationFilterChain.java:305)
        at org.apache.catalina.core.ApplicationFilterChain.doFilter(ApplicationF
        ilterChain.java:210)
        at org.apache.catalina.core.StandardWrapperValve.invoke(StandardWrapperV
        alve.java:222)
        at org.apache.catalina.core.StandardContextValve.invoke(StandardContextV
        alve.java:123)
        at org.apache.catalina.authenticator.AuthenticatorBase.invoke(Authentica
        torBase.java:502)
        at org.apache.catalina.core.StandardHostValve.invoke(StandardHostValve.j
        ava:171)
        at org.apache.catalina.valves.ErrorReportValve.invoke(ErrorReportValve.j
        ava:99)
        at org.apache.catalina.valves.AccessLogValve.invoke(AccessLogValve.java:
        953)
        at org.apache.catalina.core.StandardEngineValve.invoke(StandardEngineVal
        ve.java:118)
        at org.apache.catalina.connector.CoyoteAdapter.service(CoyoteAdapter.jav
        a:408)
        at org.apache.coyote.http11.AbstractHttp11Processor.process(AbstractHttp
        11Processor.java:1023)
        at org.apache.coyote.AbstractProtocol$AbstractConnectionHandler.process(
        AbstractProtocol.java:589)
        at org.apache.tomcat.util.net.AprEndpoint$SocketProcessor.run(AprEndpoin
        t.java:1852)
        at java.util.concurrent.ThreadPoolExecutor.runWorker(ThreadPoolExecutor.
        java:1145)
        at java.util.concurrent.ThreadPoolExecutor$Worker.run(ThreadPoolExecutor
        .java:615)
        at java.lang.Thread.run(Thread.java:745)

        Show
        Liana Munroe added a comment - - edited Tested with ICEfaces 4 trunk r44210/ICEfaces ee-3.3.0 r 44213 Reopening for possible regressions. Showcase ace:columnGroup > Overview failing. QA test apps failing dataTable > /views/alternatingRowStyleTest.jsf, /dataTable/views/ ICE-10055 .jsf With r44173 the application functions as expected. After the changes made for ICE-10529 using this demo causes a NPE. Steps to reproduce 1.) Use QA test app dataTable/views/alternatingRowStyleTest.jsf 2.) Click on Artist column header once 3.) Click on Album column header once 4.) Click on Name column header once or twice 5.) Click on any of the unsortable column headers such as AMG, Pitchfork etc. NPE occurs at this time. Mar 13, 2015 9:44:16 AM com.sun.faces.context.AjaxExceptionHandlerImpl handlePar tialResponseError SEVERE: java.lang.NullPointerException at org.icefaces.ace.util.ComponentUtils.resolveField(ComponentUtils.java :123) at org.icefaces.ace.model.table.SortCriteria.<init>(SortCriteria.java:36 ) at org.icefaces.ace.component.datatable.DataTable.getSortCriteria(DataTa ble.java:1139) at org.icefaces.ace.component.datatable.DataTable.loadLazyData(DataTable .java:1452) at org.icefaces.ace.component.datatable.DataTable.visitRowsAndExpandedRo ws(DataTable.java:1613) at org.icefaces.ace.component.datatable.DataTable.visitTree(DataTable.ja va:1516) at javax.faces.component.UIComponent.visitTree(UIComponent.java:1700) at javax.faces.component.UIForm.visitTree(UIForm.java:362) at javax.faces.component.UIComponent.visitTree(UIComponent.java:1700) at javax.faces.component.UIComponent.visitTree(UIComponent.java:1700) at org.icefaces.impl.event.RestoreResourceDependencies.processEvent(Rest oreResourceDependencies.java:48) at javax.faces.event.SystemEvent.processListener(SystemEvent.java:108) at javax.faces.event.ComponentSystemEvent.processListener(ComponentSyste mEvent.java:118) at com.sun.faces.application.ApplicationImpl.processListeners(Applicatio nImpl.java:2169) at com.sun.faces.application.ApplicationImpl.invokeListenersFor(Applicat ionImpl.java:2142) at com.sun.faces.application.ApplicationImpl.publishEvent(ApplicationImp l.java:301) at com.sun.faces.application.ApplicationImpl.publishEvent(ApplicationImp l.java:245) at javax.faces.component.UIComponentBase.encodeBegin(UIComponentBase.jav a:856) at javax.faces.component.UIViewRoot.encodeBegin(UIViewRoot.java:985) at javax.faces.component.UIComponent.encodeAll(UIComponent.java:1854) at com.sun.faces.application.view.FaceletViewHandlingStrategy.renderView (FaceletViewHandlingStrategy.java:430) at com.sun.faces.application.view.MultiViewHandler.renderView(MultiViewH andler.java:133) at javax.faces.application.ViewHandlerWrapper.renderView(ViewHandlerWrap per.java:337) at com.sun.faces.lifecycle.RenderResponsePhase.execute(RenderResponsePha se.java:120) at com.sun.faces.lifecycle.Phase.doPhase(Phase.java:101) at com.sun.faces.lifecycle.LifecycleImpl.render(LifecycleImpl.java:219) at javax.faces.webapp.FacesServlet.service(FacesServlet.java:647) at org.apache.catalina.core.ApplicationFilterChain.internalDoFilter(Appl icationFilterChain.java:305) at org.apache.catalina.core.ApplicationFilterChain.doFilter(ApplicationF ilterChain.java:210) at org.apache.catalina.core.StandardWrapperValve.invoke(StandardWrapperV alve.java:222) at org.apache.catalina.core.StandardContextValve.invoke(StandardContextV alve.java:123) at org.apache.catalina.authenticator.AuthenticatorBase.invoke(Authentica torBase.java:502) at org.apache.catalina.core.StandardHostValve.invoke(StandardHostValve.j ava:171) at org.apache.catalina.valves.ErrorReportValve.invoke(ErrorReportValve.j ava:99) at org.apache.catalina.valves.AccessLogValve.invoke(AccessLogValve.java: 953) at org.apache.catalina.core.StandardEngineValve.invoke(StandardEngineVal ve.java:118) at org.apache.catalina.connector.CoyoteAdapter.service(CoyoteAdapter.jav a:408) at org.apache.coyote.http11.AbstractHttp11Processor.process(AbstractHttp 11Processor.java:1023) at org.apache.coyote.AbstractProtocol$AbstractConnectionHandler.process( AbstractProtocol.java:589) at org.apache.tomcat.util.net.AprEndpoint$SocketProcessor.run(AprEndpoin t.java:1852) at java.util.concurrent.ThreadPoolExecutor.runWorker(ThreadPoolExecutor. java:1145) at java.util.concurrent.ThreadPoolExecutor$Worker.run(ThreadPoolExecutor .java:615) at java.lang.Thread.run(Thread.java:745)
        Hide
        Arturo Zambrano added a comment -

        Taken from ICE-10507...

        Ken Fyten added a comment - Yesterday 12:13 PM

        ace:dataTable -> Click Events demo Regression

        Re-opened as there is now an issue where multiple submit/responses appear to occur in succession when editing and submitting cell values via double-click.

        To reproduce:
        Double-click a name cell to edit it and double-click to submit the changes.
        Navigate to pg2 and then back to pg. via the pagination
        Edit another cell via double-click, notice the flashing between edit and read mode.

        The number of flashes between edit and read mode correlates to the number of paginator pages that have been changed. Weird...

        Arturo Zambrano added a comment - Yesterday 1:57 PM

        That last issue is actually a side effect of ICE-10529. Removing the client id that was added to the span that contains the script, resolves this issue.

        This happens because now the table markup is not updated in full when clicking on a page in the paginator. Because now the script tag is inside a span with its own client id and the table body (<tbody>) has its own client id as well, so, when the user clicks on a page of the paginator, the table body and the script are updated, instead of the whole markup from the root div, and, because the script re-initializes the table, a new event listener for double clicks is added to the root element, so now multiple requests are fired because there are multiple event listeners registered.

        This could be fixed by removing click event listeners before (re)initializing the table. We could also consider solving ICE-10529 without adding those inner client ids, if feasible.

        Show
        Arturo Zambrano added a comment - Taken from ICE-10507 ... Ken Fyten added a comment - Yesterday 12:13 PM ace:dataTable -> Click Events demo Regression Re-opened as there is now an issue where multiple submit/responses appear to occur in succession when editing and submitting cell values via double-click. To reproduce: Double-click a name cell to edit it and double-click to submit the changes. Navigate to pg2 and then back to pg. via the pagination Edit another cell via double-click, notice the flashing between edit and read mode. The number of flashes between edit and read mode correlates to the number of paginator pages that have been changed. Weird... Arturo Zambrano added a comment - Yesterday 1:57 PM That last issue is actually a side effect of ICE-10529 . Removing the client id that was added to the span that contains the script, resolves this issue. This happens because now the table markup is not updated in full when clicking on a page in the paginator. Because now the script tag is inside a span with its own client id and the table body (<tbody>) has its own client id as well, so, when the user clicks on a page of the paginator, the table body and the script are updated, instead of the whole markup from the root div, and, because the script re-initializes the table, a new event listener for double clicks is added to the root element, so now multiple requests are fired because there are multiple event listeners registered. This could be fixed by removing click event listeners before (re)initializing the table. We could also consider solving ICE-10529 without adding those inner client ids, if feasible.
        Hide
        Arturo Zambrano added a comment - - edited

        r44267: added call to invoke the destroy function before (re)initializing the data table, in order to remove all event listeners and thus avoid multiple event listeners firing for the same event; added code to remove other event listeners that aren't removed via destroy(); fix to only render the clickable header events set-up script when the column is sortable and clickable headers are enabled.

        Show
        Arturo Zambrano added a comment - - edited r44267: added call to invoke the destroy function before (re)initializing the data table, in order to remove all event listeners and thus avoid multiple event listeners firing for the same event; added code to remove other event listeners that aren't removed via destroy(); fix to only render the clickable header events set-up script when the column is sortable and clickable headers are enabled.
        Hide
        Arturo Zambrano added a comment -

        r44268: committed fix to 3.3 EE maintenance branch.

        Show
        Arturo Zambrano added a comment - r44268: committed fix to 3.3 EE maintenance branch.
        Hide
        Liana Munroe added a comment -

        ICEfaces 4 trunk r 44269, EE-4.0.0 r41228.
        Just started the regression testing for the latest fix and immediately found an issue when using a filter and backspacing the input:
        Console error all browsers:
        ReferenceError: _self is not defined
        http://localhost:8080/showcase/javax.faces.resource/bridge.js.jsf?ln=ice.core&v=4_0_0_150319 line 2 > eval
        Line 16

        This can be reproduced by using the showcase ace:dataTable > Overview demo.
        1.) Type the letters End into the input in the Name header .
        2.) Table will be filtered, press backspace to remove all input.
        3.) Error appears in browser console.

        Show
        Liana Munroe added a comment - ICEfaces 4 trunk r 44269, EE-4.0.0 r41228. Just started the regression testing for the latest fix and immediately found an issue when using a filter and backspacing the input: Console error all browsers: ReferenceError: _self is not defined http://localhost:8080/showcase/javax.faces.resource/bridge.js.jsf?ln=ice.core&v=4_0_0_150319 line 2 > eval Line 16 This can be reproduced by using the showcase ace:dataTable > Overview demo. 1.) Type the letters End into the input in the Name header . 2.) Table will be filtered, press backspace to remove all input. 3.) Error appears in browser console.
        Hide
        Arturo Zambrano added a comment -

        r44273: added global cache for the filter event listener, which needs to be global and static.

        The issue was caused because of an event listener function that was made static, but it still had a reference to the data table object. This was fixed by having a global cache to store these event listener functions, which are created for each data table instance with a reference to it.

        Show
        Arturo Zambrano added a comment - r44273: added global cache for the filter event listener, which needs to be global and static. The issue was caused because of an event listener function that was made static, but it still had a reference to the data table object. This was fixed by having a global cache to store these event listener functions, which are created for each data table instance with a reference to it.
        Hide
        Arturo Zambrano added a comment -

        r44274: committed last fix to 3.3 EE maintenance branch.

        Show
        Arturo Zambrano added a comment - r44274: committed last fix to 3.3 EE maintenance branch.
        Hide
        Liana Munroe added a comment -

        Verified ICEfaces 4 trunk, EE-3.3.0 maintenance branch r44806. Tomcat 7, FF 34, IE 11 Chrome 43.

        Show
        Liana Munroe added a comment - Verified ICEfaces 4 trunk, EE-3.3.0 maintenance branch r44806. Tomcat 7, FF 34, IE 11 Chrome 43.

          People

          • Assignee:
            Arturo Zambrano
            Reporter:
            Arran Mccullough
          • Votes:
            0 Vote for this issue
            Watchers:
            4 Start watching this issue

            Dates

            • Created:
              Updated:
              Resolved: