ICEfaces
  1. ICEfaces
  2. ICE-10427

ace:textEntry, ace:textAreaEntry - Add new "charCount" client event

    Details

    • Type: Improvement Improvement
    • Status: Closed
    • Priority: Major Major
    • Resolution: Fixed
    • Affects Version/s: EE-3.3.0.GA_P02, 4.0
    • Fix Version/s: EE-3.3.0.GA_P03, 4.1
    • Component/s: ACE-Components
    • Labels:
      None
    • Environment:
      ICEfaces 4, ace:textEntry, ace:textAreaEntry

      Description

      Add a new "charCount" client event to the ace:textEntryArea the ace:textEntry components. This client event will be fired whenever the number of characters entered in the component changes, either by the user typing a new character, deleting one or more characters, or cutting/pasting characters into the component.

      The "charCount" client event will provide the following attributes for each event fired:

      - currLength: The current length of the value string.
      - charsRemaining: The number of characters remaining that can be entered. This is determined via subtracting the currLength value from the maxlength attribute value on the component. If no maxlength attribute value exists, this value is -1 (?).

      This new client event supports the use-case where an application would like to present the user with a message indicating how many characters are remaining in a textEntry component that has a maxlength specified.

      Note that by using a client event for this information, it is feasible for the application to trap the event on the client and prevent it from submitting to the server, if a purely client-side JavaScript update of the message is desired. In addition, the client event could instead (or in addition) submit to the server if a server-based implementation is desirable. Thus, the client-event approach provides the most flexibility.

        Activity

        Hide
        Mircea Toma added a comment - - edited

        Implemented "charCount" client behaviour for ace:textEntry and ace:textAreaEntry. The behaviour can be enabled like so:

        <ace:textEntry .......>
            <ace:ajax event="charCount" listener="#{bean.testAllowedChars}"/>
        </ace:textEntry>
        
        Show
        Mircea Toma added a comment - - edited Implemented "charCount" client behaviour for ace:textEntry and ace:textAreaEntry. The behaviour can be enabled like so: <ace:textEntry .......> <ace:ajax event= "charCount" listener= "#{bean.testAllowedChars}" /> </ace:textEntry>
        Hide
        Mircea Toma added a comment -

        Modified renderers to Invoke behaviour decoders after the submitted value was acquired to ensure that the value is available for calculating the number of entered characters.

        Show
        Mircea Toma added a comment - Modified renderers to Invoke behaviour decoders after the submitted value was acquired to ensure that the value is available for calculating the number of entered characters.
        Hide
        Mircea Toma added a comment -

        Modified TextAreaEntryRenderer to write-out the correct set of passthrough attributes (which now include the maxlength).

        Show
        Mircea Toma added a comment - Modified TextAreaEntryRenderer to write-out the correct set of passthrough attributes (which now include the maxlength ).
        Hide
        Liana Munroe added a comment -

        Tested with ICEfaces 4 trunk, ICEfaces EE-3.3.0 maintenance branch r44533, Tomcat 7, FF 34, Chrome 41, IE 11.
        Reopening for the following reasons.
        1.) ICEfaces 4 trunk, textAreaEntry - currLength and charsRemaining only work the first time using the demo. When you change the maxlength attribute to a new number and submit, the maxlength is respected in the textAreaEntry but the currlength and charsRemaining do not update. Not an issue with ace:textEntry which works properly.

        2.) The fixes must also be applied to EE-3.3.0 maintenance branch.

        Show
        Liana Munroe added a comment - Tested with ICEfaces 4 trunk, ICEfaces EE-3.3.0 maintenance branch r44533, Tomcat 7, FF 34, Chrome 41, IE 11. Reopening for the following reasons. 1.) ICEfaces 4 trunk, textAreaEntry - currLength and charsRemaining only work the first time using the demo. When you change the maxlength attribute to a new number and submit, the maxlength is respected in the textAreaEntry but the currlength and charsRemaining do not update. Not an issue with ace:textEntry which works properly. 2.) The fixes must also be applied to EE-3.3.0 maintenance branch.
        Hide
        Mircea Toma added a comment -

        Added ice.onElementUpdate callback to cleanup the JS widget when the update modifies the input element. This ensures that a new widget is created with the new configuration.

        Show
        Mircea Toma added a comment - Added ice.onElementUpdate callback to cleanup the JS widget when the update modifies the input element. This ensures that a new widget is created with the new configuration.
        Hide
        Mircea Toma added a comment -

        Applied changes to maintenance branch.

        Show
        Mircea Toma added a comment - Applied changes to maintenance branch.
        Hide
        Liana Munroe added a comment - - edited

        Tested with ICEfaces 4 trunk, ICEfaces EE-3.3.0 maintenance branch r44568.
        ace:textAreaEntry now functions correctly in the test case mentioned above but it no longer functions correctly in any other scenario. You can no longer type into the textAreaEntry. All showcase ace:textAreaEntry demos and QA test apps (except ICE-10427.jsf) are affected.

        A new issue is seen when quickly using the backspace key, or holding down the backspace key in the textAreaEntry in /ICE-10427.jsf the page will be redirected back to it's index. If backspacing slowly this does not happen.

        Show
        Liana Munroe added a comment - - edited Tested with ICEfaces 4 trunk, ICEfaces EE-3.3.0 maintenance branch r44568. ace:textAreaEntry now functions correctly in the test case mentioned above but it no longer functions correctly in any other scenario. You can no longer type into the textAreaEntry. All showcase ace:textAreaEntry demos and QA test apps (except ICE-10427 .jsf) are affected. A new issue is seen when quickly using the backspace key, or holding down the backspace key in the textAreaEntry in / ICE-10427 .jsf the page will be redirected back to it's index. If backspacing slowly this does not happen.
        Hide
        Mircea Toma added a comment - - edited

        Fixed maxlength attribute's default value. Previously attribute defaulted to '0' which effectively made the entry read-only.

        Show
        Mircea Toma added a comment - - edited Fixed maxlength attribute's default value. Previously attribute defaulted to '0' which effectively made the entry read-only.
        Hide
        Mircea Toma added a comment -

        As for the backspace behaviour, the components have their autoTab feature enabled which caused a tabbing to occur whenever the maximum number of characters is reached. When the maximum length is decreased in ICE-10427 test case, backspacing will remove characters until the newly set maximum length is reached. The first backspace will trigger a focus on the next element, in this case the window. The second backspace is triggering a "Back" navigation which is the default behaviour in any browser when the window is in focus. Maybe not desirable but this is normal behaviour.

        Show
        Mircea Toma added a comment - As for the backspace behaviour, the components have their autoTab feature enabled which caused a tabbing to occur whenever the maximum number of characters is reached. When the maximum length is decreased in ICE-10427 test case, backspacing will remove characters until the newly set maximum length is reached. The first backspace will trigger a focus on the next element, in this case the window. The second backspace is triggering a "Back" navigation which is the default behaviour in any browser when the window is in focus. Maybe not desirable but this is normal behaviour.
        Hide
        Mircea Toma added a comment -

        Prevent default action whenever backspace keypress events from the textarea reach the document root.

        Show
        Mircea Toma added a comment - Prevent default action whenever backspace keypress events from the textarea reach the document root.
        Hide
        Liana Munroe added a comment - - edited

        Tested with ICEfaces EE-3.3.0 tag and ICEfaces 4 trunk r44593. Tomcat 7, IE, 11, 10, 9, 8, 7, FF 34, Chrome 42.
        Issues found:
        1.) ace:textAreaEntry
        The maxlength attribute of the ace:textAreaEntry is not respected when using IE 9.

        2.) ace:textAreaEntry
        The currentLength and charsRemaining are not working when using IE 8/7. Also the maxlength does not work properly with IE 8/7. You are able to type more characters than allowed, then the extra characters are removed when typing is completed.

        3.) Holding the backspace key in a textAreaEntry still causes the page to navigate back (FF 34, EE-3.3.0)

        4.) IF 4 trunk - ace:textEntry, the currentLength and charsRemaining are not working when using IE 8/7

        5.) Possible regression Jenkins build 02
        Can not use backspace key inside ace:textEntry, h:inputText, ace:comboBox

        Show
        Liana Munroe added a comment - - edited Tested with ICEfaces EE-3.3.0 tag and ICEfaces 4 trunk r44593. Tomcat 7, IE, 11, 10, 9, 8, 7, FF 34, Chrome 42. Issues found: 1.) ace:textAreaEntry The maxlength attribute of the ace:textAreaEntry is not respected when using IE 9. 2.) ace:textAreaEntry The currentLength and charsRemaining are not working when using IE 8/7. Also the maxlength does not work properly with IE 8/7. You are able to type more characters than allowed, then the extra characters are removed when typing is completed. 3.) Holding the backspace key in a textAreaEntry still causes the page to navigate back (FF 34, EE-3.3.0) 4.) IF 4 trunk - ace:textEntry, the currentLength and charsRemaining are not working when using IE 8/7 5.) Possible regression Jenkins build 02 Can not use backspace key inside ace:textEntry, h:inputText, ace:comboBox
        Hide
        Mircea Toma added a comment -

        5) Avoid cancelling backspace default action for textarea and input elements.

        Show
        Mircea Toma added a comment - 5) Avoid cancelling backspace default action for textarea and input elements.
        Hide
        Mircea Toma added a comment -

        3) I cannot reproduce this.

        Show
        Mircea Toma added a comment - 3) I cannot reproduce this.
        Hide
        Mircea Toma added a comment -

        Added IE 9 special handling for backspace and delete keypresses since these keys do not trigger 'input' events. Added alternative callbacks for IE 7/8 to handle 'charCount' component events (DOM 'input' events not supported).

        Show
        Mircea Toma added a comment - Added IE 9 special handling for backspace and delete keypresses since these keys do not trigger 'input' events. Added alternative callbacks for IE 7/8 to handle 'charCount' component events (DOM 'input' events not supported).
        Hide
        Mircea Toma added a comment - - edited

        2) Fixed by "Added alternative callbacks for IE 7/8 to handle 'charCount' component events (DOM 'input' events not supported)." changes. As for "You are able to type more characters than allowed, then the extra characters are removed when typing is completed." comment, I tried different strategies for blocking input when maxlength is reach but the one the works reliably is what we have (extra characters are removed by the JS code).

        Show
        Mircea Toma added a comment - - edited 2) Fixed by "Added alternative callbacks for IE 7/8 to handle 'charCount' component events (DOM 'input' events not supported)." changes. As for "You are able to type more characters than allowed, then the extra characters are removed when typing is completed." comment, I tried different strategies for blocking input when maxlength is reach but the one the works reliably is what we have (extra characters are removed by the JS code).
        Hide
        Mircea Toma added a comment -

        1) Fixed by "Added IE 9 special handling for backspace and delete keypresses since these keys do not trigger 'input' events." changes.

        Show
        Mircea Toma added a comment - 1) Fixed by "Added IE 9 special handling for backspace and delete keypresses since these keys do not trigger 'input' events." changes.
        Hide
        Liana Munroe added a comment -

        Testing with EE-maintenance branch and P03 tag r44630 and Jenkins Build 04.
        Can not use backspace key in dataTable filters, ace:textEntry, ace:textAreaEntry, ace:comboBox or any h:inputText fields throughout showcase.

        Show
        Liana Munroe added a comment - Testing with EE-maintenance branch and P03 tag r44630 and Jenkins Build 04. Can not use backspace key in dataTable filters, ace:textEntry, ace:textAreaEntry, ace:comboBox or any h:inputText fields throughout showcase.
        Hide
        Mircea Toma added a comment -

        Wire only one callback to cancel backspace keypress events for elements other that textarea or input. Previously I tried splitting up the callback to handle the input or textarea triggered events, but that is not possible in this case.

        Show
        Mircea Toma added a comment - Wire only one callback to cancel backspace keypress events for elements other that textarea or input. Previously I tried splitting up the callback to handle the input or textarea triggered events, but that is not possible in this case.
        Hide
        Liana Munroe added a comment - - edited

        Tested with ICEfaces EE-3.3.0.GA_P03 tag r44633. Tomcat 7, IE 11, 10, 9, 8, 7, FF 34, Chrome 42.
        Verified now able to use backspace key in all scenarios.
        The following issues remain....
        IE 9 - ace:textEntry
        currLength and chars remaining function when typing into the input but do not register when using backspace or delete keys to remove chars.

        All browsers - ace:textAreaEntry
        When testing a demo that implements the charCount event (/ICE-10427.jsf) , using the delete key causes focus to be placed on the last char in the input. Not an issue with other ace:textAreaEntry demos that do not use the charCount event

        IE 8 - ace:textEntry
        currLength and chars remaining do not function

        IE 7 - ace:textEntry
        maxlength, currLength and chars remaining do not function

        Show
        Liana Munroe added a comment - - edited Tested with ICEfaces EE-3.3.0.GA_P03 tag r44633. Tomcat 7, IE 11, 10, 9, 8, 7, FF 34, Chrome 42. Verified now able to use backspace key in all scenarios. The following issues remain.... IE 9 - ace:textEntry currLength and chars remaining function when typing into the input but do not register when using backspace or delete keys to remove chars. All browsers - ace:textAreaEntry When testing a demo that implements the charCount event (/ ICE-10427 .jsf) , using the delete key causes focus to be placed on the last char in the input. Not an issue with other ace:textAreaEntry demos that do not use the charCount event IE 8 - ace:textEntry currLength and chars remaining do not function IE 7 - ace:textEntry maxlength, currLength and chars remaining do not function
        Hide
        Ken Fyten added a comment -

        Re-opened for remaining issues reported above.

        If necessary, we can live with this feature not being supported on IE7/8.

        Show
        Ken Fyten added a comment - Re-opened for remaining issues reported above. If necessary, we can live with this feature not being supported on IE7/8.
        Hide
        Mircea Toma added a comment - - edited

        Committed the changes for ace:textAreaEntry (in commit #44615) to ace:textEntry as well. This fixes IE 7, 8 and 9 specific issues.

        As for the " delete key causes focus to be placed on the last char " issue, that is caused by the DOM update applied after the charCount request is issued. The focus retention implementation re-applies focus were it was in case the element was updated, the position of the cursor is not restored (in the past that proved difficult to implement across all browsers).

        Show
        Mircea Toma added a comment - - edited Committed the changes for ace:textAreaEntry (in commit #44615) to ace:textEntry as well. This fixes IE 7, 8 and 9 specific issues. As for the " delete key causes focus to be placed on the last char " issue, that is caused by the DOM update applied after the charCount request is issued. The focus retention implementation re-applies focus were it was in case the element was updated, the position of the cursor is not restored (in the past that proved difficult to implement across all browsers).
        Hide
        Liana Munroe added a comment -

        Verified ICEfaces EE-3.3.0.GA_P03 tag r44641, ICEfaces EE-3.3.0. maintenance branch and ICEfaces 4 trunk r44641. Tomcat 7, IE 11, 10, 9, 8, 7, FF 34, Chrome 42.

        The only issue remaining is that the maxlength can not be dynamically changed in ace:textEntry using IE 7.

        Show
        Liana Munroe added a comment - Verified ICEfaces EE-3.3.0.GA_P03 tag r44641, ICEfaces EE-3.3.0. maintenance branch and ICEfaces 4 trunk r44641. Tomcat 7, IE 11, 10, 9, 8, 7, FF 34, Chrome 42. The only issue remaining is that the maxlength can not be dynamically changed in ace:textEntry using IE 7.
        Hide
        Ken Fyten added a comment -

        Re-opened for remaining IE7 issue.

        Show
        Ken Fyten added a comment - Re-opened for remaining IE7 issue.
        Hide
        Mircea Toma added a comment -

        Modified TextEntryRender to change the maxLength property programmatically since the DOM update does not change the value as expected (in IE7).

        Show
        Mircea Toma added a comment - Modified TextEntryRender to change the maxLength property programmatically since the DOM update does not change the value as expected (in IE7).
        Hide
        Liana Munroe added a comment -

        Verified ICEfaces EE-3.3.0.GA_P03 tag, ICEfaces maintenance branch r44652. WIldfly 8.2, IE 7, 8, 9, 10, 11, Chrome 42, FF 34.

        Show
        Liana Munroe added a comment - Verified ICEfaces EE-3.3.0.GA_P03 tag, ICEfaces maintenance branch r44652. WIldfly 8.2, IE 7, 8, 9, 10, 11, Chrome 42, FF 34.
        Hide
        Ken Fyten added a comment -

        Re-opened to add a clean JS API to provide the same data that the server-side event provides for use with a purely client-side implementation:

        • currLength: The current length of the value string.
        • charsRemaining: The number of characters remaining that can be entered.

        In the client scenario, the application would use a JS callback on the ace:ajax onStart event.

        Is there anyway that the onStart event handler can access a JS api for the charCount event to get the information without having to lookup the source component in the DOM?

        Show
        Ken Fyten added a comment - Re-opened to add a clean JS API to provide the same data that the server-side event provides for use with a purely client-side implementation: currLength: The current length of the value string. charsRemaining: The number of characters remaining that can be entered. In the client scenario, the application would use a JS callback on the ace:ajax onStart event. Is there anyway that the onStart event handler can access a JS api for the charCount event to get the information without having to lookup the source component in the DOM?
        Hide
        Mircea Toma added a comment -

        Implemented JS API to access the current length and remaining chars for the input.
        Example:

        <ace:ajax event="charCount" ....  onStart="console.info(cfg.currLength()); console.info(cfg.charsRemaining()); return true;" />
        
        Show
        Mircea Toma added a comment - Implemented JS API to access the current length and remaining chars for the input. Example: <ace:ajax event= "charCount" .... onStart= "console.info(cfg.currLength()); console.info(cfg.charsRemaining()); return true ;" />
        Hide
        Carmen Cristurean added a comment - - edited

        Verified with 3.3.0-maintenance branch revision 44671 in all IE browsers, FF34 and Chrome42 on Tomcat7.
        This does not appear to work in IE7, the current length and chars remaining numbers are not updated.

        Show
        Carmen Cristurean added a comment - - edited Verified with 3.3.0-maintenance branch revision 44671 in all IE browsers, FF34 and Chrome42 on Tomcat7. This does not appear to work in IE7, the current length and chars remaining numbers are not updated.
        Hide
        Mircea Toma added a comment - - edited

        Is this for both, textEntry and textAreaEntry? Please make sure icefaces-compat.jar is class-loaded so that JSON API is available to IE7.

        Show
        Mircea Toma added a comment - - edited Is this for both, textEntry and textAreaEntry? Please make sure icefaces-compat.jar is class-loaded so that JSON API is available to IE7.
        Hide
        Carmen Cristurean added a comment - - edited

        Both textEntry and textAreaEntry fail in IE7: on icetest-XP02 (IE7/Windows XP) test machine a JS error popup opens up each time when typing a character in the component, screen shot attached; there is no such error on icepcvm-IE7 (IE7/Windows Vista), however the chars remaining and current length text is not updated.

        Show
        Carmen Cristurean added a comment - - edited Both textEntry and textAreaEntry fail in IE7: on icetest-XP02 (IE7/Windows XP) test machine a JS error popup opens up each time when typing a character in the component, screen shot attached; there is no such error on icepcvm-IE7 (IE7/Windows Vista), however the chars remaining and current length text is not updated.
        Hide
        Mircea Toma added a comment - - edited

        It seems that you added the onStart attribute to the ace:ajax facet. The JS code in the attribute references the console object that is not defined natively in IE7. You can replace the console.info(....) call with an ice.log.debug(ice.log, ....) call and pop up the log window by typing Ctrl+Shift+T.

        <ace:ajax event="charCount" ....  onStart="ice.log.debug(ice.log, cfg.currLength()); ice.log.debug(ice.log, cfg.charsRemaining()); return true;" />
        
        Show
        Mircea Toma added a comment - - edited It seems that you added the onStart attribute to the ace:ajax facet. The JS code in the attribute references the console object that is not defined natively in IE7. You can replace the console.info(....) call with an ice.log.debug(ice.log, ....) call and pop up the log window by typing Ctrl+Shift+T. <ace:ajax event= "charCount" .... onStart= "ice.log.debug(ice.log, cfg.currLength()); ice.log.debug(ice.log, cfg.charsRemaining()); return true ;" />
        Hide
        Liana Munroe added a comment -

        Verified remaining IE7 issues with textEntry and textAreaEntry, ICEfaces EE-3.3.0 maintenance branch r44690 using the icepcvm-ie7 test machine and the popup log window. The changes have not been committed to the EE-3.3.0.GA_P03 tag yet.

        Note for QA - On xp-02 test machine, when attempting to use the pop up the log window by typing Ctrl+Shift+T there is an error that causes IE7 to crash:
        Line 2
        Char 19881
        An outgoing call cannot be made since the application is dispatching an input-synchronous call.
        Code 0

        Show
        Liana Munroe added a comment - Verified remaining IE7 issues with textEntry and textAreaEntry, ICEfaces EE-3.3.0 maintenance branch r44690 using the icepcvm-ie7 test machine and the popup log window. The changes have not been committed to the EE-3.3.0.GA_P03 tag yet. Note for QA - On xp-02 test machine, when attempting to use the pop up the log window by typing Ctrl+Shift+T there is an error that causes IE7 to crash: Line 2 Char 19881 An outgoing call cannot be made since the application is dispatching an input-synchronous call. Code 0
        Hide
        Mircea Toma added a comment -

        Applied changes to EE-3.3.0.GA_P03 tag.

        Please try another IE7 instance (on a different machine) to confirm error.

        Show
        Mircea Toma added a comment - Applied changes to EE-3.3.0.GA_P03 tag. Please try another IE7 instance (on a different machine) to confirm error.
        Hide
        Liana Munroe added a comment -

        Verified IE 7 issues resolved on ICEfaces EE-3.3.0.GA_P03 tag r44693 using icepcvm-ie7 (a windows vista instance).
        When testing on the xp04 and xp 02 (windows xp with IE 7 instances) the browser crashes when attempting to use the popup log window.
        Line 2
        Char 19881
        An outgoing call cannot be made since the application is dispatching an input-synchronous call.
        Code 0

        Show
        Liana Munroe added a comment - Verified IE 7 issues resolved on ICEfaces EE-3.3.0.GA_P03 tag r44693 using icepcvm-ie7 (a windows vista instance). When testing on the xp04 and xp 02 (windows xp with IE 7 instances) the browser crashes when attempting to use the popup log window. Line 2 Char 19881 An outgoing call cannot be made since the application is dispatching an input-synchronous call. Code 0
        Hide
        Mircea Toma added a comment -

        Created ICE-10689 to follow up the logging issue in IE.

        Show
        Mircea Toma added a comment - Created ICE-10689 to follow up the logging issue in IE.
        Hide
        Liana Munroe added a comment -

        Reopening because the new ace:textEntry, ace:textAreaEntry > Character Count demos in the ICEfaces 4 showcase fail when used with IE 8.

        Show
        Liana Munroe added a comment - Reopening because the new ace:textEntry, ace:textAreaEntry > Character Count demos in the ICEfaces 4 showcase fail when used with IE 8.
        Hide
        Mircea Toma added a comment -

        Modified showcase page to use Element.innerHTML instead of Element.textContent when updating SPAN's content since the latter property is not supported in IE8.

        Show
        Mircea Toma added a comment - Modified showcase page to use Element.innerHTML instead of Element.textContent when updating SPAN's content since the latter property is not supported in IE8.
        Hide
        Liana Munroe added a comment -

        Verified showcase/IE 8 issue verified ICEfaces 4 trunk r44706. Tomcat 7.

        Show
        Liana Munroe added a comment - Verified showcase/IE 8 issue verified ICEfaces 4 trunk r44706. Tomcat 7.

          People

          • Assignee:
            Mircea Toma
            Reporter:
            Judy Guglielmin
          • Votes:
            0 Vote for this issue
            Watchers:
            5 Start watching this issue

            Dates

            • Created:
              Updated:
              Resolved: