ICEfaces
  1. ICEfaces
  2. ICE-6041

TabIndex causes focus issue when toggling through selectOneRadio using keyboard

    Details

    • Type: Bug Bug
    • Status: Closed
    • Priority: Major Major
    • Resolution: Fixed
    • Affects Version/s: 1.8.2-EE-GA_P01
    • Fix Version/s: 1.8.3, 1.8.2-EE-GA_P02, 2.0.0
    • Component/s: ICE-Components
    • Labels:
      None
    • Environment:
      IE7/8, FF3.6.9
    • Workaround Exists:
      Yes
    • Workaround Description:
      Do not use tabIndex.

      Description

      The tabIndex attribute is causing a focus issue with the ice:selectOneRadio. When navigating the form using the keyboard and tabbing into an ice:selectOneRadio, focus is placed on the parent element and not the first radio item in the list. When you hit tab again, you proceed to the next component. However, hitting tab again places focus back onto the first radio item in the list. Test case attached. This issue does not occur when the tabIndex is removed.

        Activity

        Tyler Johnson created issue -
        Tyler Johnson made changes -
        Field Original Value New Value
        Issue Type Improvement [ 4 ] Bug [ 1 ]
        Workaround Description <script>
        function focusRadio() {
        var radio=document.getElementById("form:selectRadio:_1" );
        radio.focus();
        }
        </script>

        <ice:selectOneRadio id="selectRadio" onfocus="focusRadio()" layout="lineDirection">
              <f:selectItems value="#{bean.testList}" />
        </ice:selectOneRadio>
        Environment IE7/8, FF3 IE7/8, FF3.6.9
        Workaround Exists [Yes]
        Salesforce Case [5007000000C5Duz]
        Tyler Johnson made changes -
        Summary Cannot toggle through selectOneRadio options using keyboard TabIndex causes focus issue when toggling through selectOneRadio using keyboard
        Description When tabbing to a ice:selectOneRadio using the keyboard, focus is applied to the parent element and not the first radio item in the list. This behavior also occurs with the h:selectOneRadio component. This improvement should be added to the component but a very simple javascript workaround exists. The tabIndex attribute is causing a focus issue with the ice:selectOneRadio. When navigating the form using the keyboard and tabbing into an ice:selectOneRadio, focus is placed on the parent element and not the first radio item in the list. When you hit tab again, you proceed to the next component. However, hitting tab again places focus back onto the first radio item in the list. Test case attached. This issue does not occur when the tabIndex is removed.
        Tyler Johnson made changes -
        Workaround Description <script>
        function focusRadio() {
        var radio=document.getElementById("form:selectRadio:_1" );
        radio.focus();
        }
        </script>

        <ice:selectOneRadio id="selectRadio" onfocus="focusRadio()" layout="lineDirection">
              <f:selectItems value="#{bean.testList}" />
        </ice:selectOneRadio>
        Workaround Exists [Yes]
        Tyler Johnson made changes -
        Attachment sc9295.war [ 12579 ]
        Ken Fyten made changes -
        Assignee Ken Fyten [ ken.fyten ]
        Ken Fyten made changes -
        Fix Version/s 1.8.2-EE-GA_P02 [ 10226 ]
        Tyler Johnson made changes -
        Workaround Description Do not use tabIndex.
        Workaround Exists [Yes]
        Ken Fyten made changes -
        Assignee Priority P1
        Ken Fyten made changes -
        Fix Version/s 1.8.3 [ 10211 ]
        Assignee Ken Fyten [ ken.fyten ] Yip Ng [ yip.ng ]
        Ken Fyten made changes -
        Fix Version/s 2.0.0 [ 10230 ]
        Repository Revision Date User Message
        ICEsoft Public SVN Repository #22989 Mon Nov 01 13:03:37 MDT 2010 yip.ng ICE-6041: TabIndex causes focus issue when toggling through selectOneRadio using keyboard.
        Files Changed
        Commit graph MODIFY /icefaces/trunk/icefaces/core/src/com/icesoft/faces/renderkit/dom_html_basic/SelectManyCheckboxListRenderer.java
        Commit graph MODIFY /icefaces/trunk/icefaces/core/src/com/icesoft/faces/renderkit/dom_html_basic/RadioRenderer.java
        Repository Revision Date User Message
        ICEsoft Public SVN Repository #22990 Mon Nov 01 13:15:30 MDT 2010 yip.ng ICE-6041: TabIndex causes focus issue when toggling through selectOneRadio using keyboard.
        Files Changed
        Commit graph MODIFY /icefaces2/trunk/icefaces/compat/core/src/main/java/com/icesoft/faces/renderkit/dom_html_basic/RadioRenderer.java
        Commit graph MODIFY /icefaces2/trunk/icefaces/compat/core/src/main/java/com/icesoft/faces/renderkit/dom_html_basic/SelectManyCheckboxListRenderer.java
        Hide
        yip.ng added a comment - - edited

        Revision: 22989


        Modified : /icefaces/trunk/icefaces/core/src/com/icesoft/faces/renderkit/dom_html_basic/RadioRenderer.java
        Modified : /icefaces/trunk/icefaces/core/src/com/icesoft/faces/renderkit/dom_html_basic/SelectManyCheckboxListRenderer.java

        Revision: 22990


        Modified : /icefaces2/trunk/icefaces/compat/core/src/main/java/com/icesoft/faces/renderkit/dom_html_basic/RadioRenderer.java
        Modified : /icefaces2/trunk/icefaces/compat/core/src/main/java/com/icesoft/faces/renderkit/dom_html_basic/SelectManyCheckboxListRenderer.java

        Show
        yip.ng added a comment - - edited Revision: 22989 Modified : /icefaces/trunk/icefaces/core/src/com/icesoft/faces/renderkit/dom_html_basic/RadioRenderer.java Modified : /icefaces/trunk/icefaces/core/src/com/icesoft/faces/renderkit/dom_html_basic/SelectManyCheckboxListRenderer.java Revision: 22990 Modified : /icefaces2/trunk/icefaces/compat/core/src/main/java/com/icesoft/faces/renderkit/dom_html_basic/RadioRenderer.java Modified : /icefaces2/trunk/icefaces/compat/core/src/main/java/com/icesoft/faces/renderkit/dom_html_basic/SelectManyCheckboxListRenderer.java
        Hide
        yip.ng added a comment -

        Fixed.

        Note that once tabbed to a radio button group, the standard way of navigating within the radio buttons in the group is using the arrow keys.

        Show
        yip.ng added a comment - Fixed. Note that once tabbed to a radio button group, the standard way of navigating within the radio buttons in the group is using the arrow keys.
        yip.ng made changes -
        Status Open [ 1 ] Resolved [ 5 ]
        Resolution Fixed [ 1 ]
        Ken Fyten made changes -
        Status Resolved [ 5 ] Closed [ 6 ]
        Assignee Priority P1

          People

          • Assignee:
            yip.ng
            Reporter:
            Tyler Johnson
          • Votes:
            0 Vote for this issue
            Watchers:
            0 Start watching this issue

            Dates

            • Created:
              Updated:
              Resolved: