ICEfaces
  1. ICEfaces
  2. ICE-8305

Focus breaks after tabing into ice:selectOneMenu in IE8/7 with Custom JavaScript call

          Details

          • Type: Bug Bug
          • Status: Closed
          • Priority: Major Major
          • Resolution: Won't Fix
          • Affects Version/s: EE-1.8.2.GA_P03, EE-1.8.2.GA_P04
          • Fix Version/s: EE-1.8.2.GA_P05
          • Component/s: ICE-Components
          • Labels:
            None
          • Environment:
            IE8 in Quirks mode or IE7
          • Assignee Priority:
            P1
          • Workaround Exists:
            Yes
          • Workaround Description:
            Hide
            If using IE8 add the following tag to the page to force IE8 Standards Mode:

            <meta http-equiv="X-UA-Compatible" content="IE=8" />
            Show
            If using IE8 add the following tag to the page to force IE8 Standards Mode: <meta http-equiv="X-UA-Compatible" content="IE=8" />

            Description

            When tabbing through a form with some various inputs, there is a partialSubmit called each time. On this submit a basic JavaScript counter is updated. When tabbing into an ice:selectOneMenu there is some different behavior seen:
             - focus is lost when tabbing into the menu, tabbing begins at the top page input.
             - focus stays on the menu but when tabbing out it won't move to the next field.

            This issue is only reproducible on IE8 running in Quirks mode and IE7 with the JavaScript counter.

              Activity

              Descending order - Click to sort in ascending order
              Hide
              Permalink
              Mircea Toma added a comment -

              It seems that the provided test case exposes a bug in Internet Explorer, not in ICEfaces. The DOM update received after tabbing from the second inputText to the selectOneMenu contains changes for a the DIV element that holds the counter and a script element that increments this counter. The updated DIV is styled with "float: right;" CSS rule. Once this rule is removed the focus issue does not occur anymore.

              This kind of issue cannot be addressed from within ICEfaces. So, as a workaround the ice:panelGroup that generates the styled DIV (holding the counter value) could be moved outside its parent ice:panelGroup. This way the generated update will only target the script element. Another solution would be to change the styling to avoid using the 'float' rule.

              Before:
              <ice:panelGroup>
              <ice:panelGroup id="dateAndTime" style="float: right;">0</ice:panelGroup>
              <script>
              refreshTime2(#

              {globals.date});
              </script>
              </ice:panelGroup>

              After:
              <ice:panelGroup id="dateAndTime" style="float: right;">0</ice:panelGroup>
              <ice:panelGroup>
              <script>
              refreshTime2(#{globals.date}

              );
              </script>
              </ice:panelGroup>

              Show
              Mircea Toma added a comment - It seems that the provided test case exposes a bug in Internet Explorer, not in ICEfaces. The DOM update received after tabbing from the second inputText to the selectOneMenu contains changes for a the DIV element that holds the counter and a script element that increments this counter. The updated DIV is styled with "float: right;" CSS rule. Once this rule is removed the focus issue does not occur anymore. This kind of issue cannot be addressed from within ICEfaces. So, as a workaround the ice:panelGroup that generates the styled DIV (holding the counter value) could be moved outside its parent ice:panelGroup. This way the generated update will only target the script element. Another solution would be to change the styling to avoid using the 'float' rule. Before: <ice:panelGroup> <ice:panelGroup id="dateAndTime" style="float: right;">0</ice:panelGroup> <script> refreshTime2(# {globals.date}); </script> </ice:panelGroup> After: <ice:panelGroup id="dateAndTime" style="float: right;">0</ice:panelGroup> <ice:panelGroup> <script> refreshTime2(#{globals.date} ); </script> </ice:panelGroup>
              Hide
              Permalink
              Arran Mccullough added a comment -

              Attached test case that shows issue.

              Steps:

              • Run welcomeICEfaces.iface
              • Focus to the first input field.
              • Start tabbing through the form.
              • When it reaches the selectOneMenu the mentioned behavior can be seen.
              Show
              Arran Mccullough added a comment - Attached test case that shows issue. Steps: Run welcomeICEfaces.iface Focus to the first input field. Start tabbing through the form. When it reaches the selectOneMenu the mentioned behavior can be seen.

                People

                • Assignee:
                  Mircea Toma
                  Reporter:
                  Arran Mccullough
                • Votes:
                  1 Vote for this issue
                  Watchers:
                  1 Start watching this issue

                  Dates

                  • Created:
                    Updated:
                    Resolved: