ICEfaces
  1. ICEfaces
  2. ICE-6506

SelectOneListbox partialSubmit focus issue

          Details

            Description

            In a form if we have many <ice:selectOneListbox> where each one is partially submitted, or the whole form is partially submitted, then if user sets some value to first drop down by arrow keys(not with mouse) and then if user press tab key then the focus is again coming to first drop down instead of transferring to second drop down.

            This seems to only occur on Firefox. In IE the focus is kept on the next component. This also seems to effect the selectOneListbox, testing the same issue with selectOneMenu doesn't reproduce the same results.

            Sample code:

            <ice:form partialSubmit="true">
            <ice:panelGrid columns="1">
            <ice:selectOneListbox value="0" size="1">
            <f:selectItem itemValue="0" itemLabel="0"/>
            <f:selectItem itemValue="1" itemLabel="1"/>
            <f:selectItem itemValue="2" itemLabel="2"/>
            <f:selectItem itemValue="3" itemLabel="3"/>
            <f:selectItem itemValue="4" itemLabel="4"/>
            </ice:selectOneListbox >
            <ice:selectOneListbox value="0" size="1">
            <f:selectItem itemValue="0" itemLabel="0"/>
            <f:selectItem itemValue="1" itemLabel="1"/>
            <f:selectItem itemValue="2" itemLabel="2"/>
            <f:selectItem itemValue="3" itemLabel="3"/>
            <f:selectItem itemValue="4" itemLabel="4"/>
            </ice:selectOneListbox>
            <ice:selectOneListbox value="0" size="1">
            <f:selectItem itemValue="0" itemLabel="0"/>
            <f:selectItem itemValue="1" itemLabel="1"/>
            <f:selectItem itemValue="2" itemLabel="2"/>
            <f:selectItem itemValue="3" itemLabel="3"/>
            <f:selectItem itemValue="4" itemLabel="4"/>
            </ice:selectOneListbox>
            <ice:selectOneListbox value="0" size="1">
            <f:selectItem itemValue="0" itemLabel="0"/>
            <f:selectItem itemValue="1" itemLabel="1"/>
            <f:selectItem itemValue="2" itemLabel="2"/>
            <f:selectItem itemValue="3" itemLabel="3"/>
            <f:selectItem itemValue="4" itemLabel="4"/>
            </ice:selectOneListbox>

            </ice:panelGrid>
            </ice:form>

              Activity

              Ascending order - Click to sort in descending order
              Hide
              Permalink
              Arran Mccullough added a comment -

              Tested with ICEfaces EE 1.8.2 P01 and ICEfaces 1.8.2 with the same results.

              Show
              Arran Mccullough added a comment - Tested with ICEfaces EE 1.8.2 P01 and ICEfaces 1.8.2 with the same results.
              Hide
              Permalink
              Mircea Toma added a comment -

              The difference in behavior between Firefox and IE is due to how these browsers fire the 'change' event.

              In Firefox the 'change' event is not triggered while selecting the different values in the drop-down. The 'change' event triggers the submit only while tabbing out, sending element's focus along. The focus retention mechanism on the server kicks in by sending back a JS command to re-apply the focus on the submitting element.

              In IE the 'change' event is triggered while selecting values in drop-down. After each submit the focus is re-applied on the same element by the same focus retention mechanism, this has no visible effect since the focus was not changed yet anyway. While tabbing out only 'onblur' event is triggered which does not cause a submit, thus focus can move freely to the next dropdown.

              Show
              Mircea Toma added a comment - The difference in behavior between Firefox and IE is due to how these browsers fire the 'change' event. In Firefox the 'change' event is not triggered while selecting the different values in the drop-down. The 'change' event triggers the submit only while tabbing out, sending element's focus along. The focus retention mechanism on the server kicks in by sending back a JS command to re-apply the focus on the submitting element. In IE the 'change' event is triggered while selecting values in drop-down. After each submit the focus is re-applied on the same element by the same focus retention mechanism, this has no visible effect since the focus was not changed yet anyway. While tabbing out only 'onblur' event is triggered which does not cause a submit, thus focus can move freely to the next dropdown.
              Hide
              Permalink
              Ken Fyten added a comment -

              Mircea, if this is the case, then why does the focus change correctly when running the component-showcase app. with the Selection demo? If you use the keyboard on FF 4 to select a selectOneMenu item, then tab to leave the component, it partial-submits correctly and focus is placed on the next component in the page (correctly).

              Show
              Ken Fyten added a comment - Mircea, if this is the case, then why does the focus change correctly when running the component-showcase app. with the Selection demo? If you use the keyboard on FF 4 to select a selectOneMenu item, then tab to leave the component, it partial-submits correctly and focus is placed on the next component in the page (correctly).
              Hide
              Permalink
              Mircea Toma added a comment -

              In component-showcase the drop-down is rendered by ice:selectOneListbox while in the attached test case ice:selectOneMenu renders the drop-down. It looks like ice:selectOneMenu erases the current focus just before submitting the form thus disabling the focus retention temporarily.

              ice:selectOneListbox renders > ... onchange="Ice.selectChange(form,this,event,300);" ...
              ice:selectOneMenu renders > ... onchange="setFocus('');Ice.selectChange(form,this,event,300);" ...

              So, a small change in ice:selectOneListbox's renderer should fix the issue.

              Show
              Mircea Toma added a comment - In component-showcase the drop-down is rendered by ice:selectOneListbox while in the attached test case ice:selectOneMenu renders the drop-down. It looks like ice:selectOneMenu erases the current focus just before submitting the form thus disabling the focus retention temporarily. ice:selectOneListbox renders > ... onchange="Ice.selectChange(form,this,event,300);" ... ice:selectOneMenu renders > ... onchange="setFocus('');Ice.selectChange(form,this,event,300);" ... So, a small change in ice:selectOneListbox's renderer should fix the issue.
              Hide
              Permalink
              Mircea Toma added a comment -

              Disabled focus retention by setting focus to '' for submits triggered by 'change' events.

              Show
              Mircea Toma added a comment - Disabled focus retention by setting focus to '' for submits triggered by 'change' events.
              Hide
              Permalink
              Ken Fyten added a comment -

              Should also consider changing this for the IF 2.0 compat component.

              Show
              Ken Fyten added a comment - Should also consider changing this for the IF 2.0 compat component.
              Hide
              Permalink
              Ken Fyten added a comment -

              This will need to be committed to icefaces2/trunk and icefaces2/branches/icefaces-2.0.x-maintenance branch if applicable for compat.

              Show
              Ken Fyten added a comment - This will need to be committed to icefaces2/trunk and icefaces2/branches/icefaces-2.0.x-maintenance branch if applicable for compat.
              Hide
              Permalink
              Mircea Toma added a comment -

              Applied fixes to icefaces2/trunk and icefaces2/branches/icefaces-2.0.x-maintenance.

              Show
              Mircea Toma added a comment - Applied fixes to icefaces2/trunk and icefaces2/branches/icefaces-2.0.x-maintenance.

                People

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

                  Dates

                  • Created:
                    Updated:
                    Resolved: