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

              Ascending order - Click to sort in descending order
              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 ]
              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: