0 Replies Latest reply on May 18, 2011 11:19 AM by Steven De Groote

    Focus is lost with ajax update after dropdown change

    Steven De Groote Newbie

      Hi,

       

      in below (simplified) code I have a dropdown list that fires an ajax event every time the selected item changes. This appears to work fine with the mouse, but there is an issue when selecting an item with the keyboard.

      When tabbing to the dropdown, then press downkey to select another element, then nothing happens yet. This is ok I think.

      The problem is however that when I press Tab again to leave the field and confirm my change, in IE focus of my form is completely lost.

       

      So I hoped the focus would switch from postcode field to city field, but instead it moved from postcode field to nowhere (in fact the first focusable element on my page).

       

      Is there a possible workaround to this problem within richfaces?

       

      Thanks,

      Steven

       

       

                  <tr>
                      <td><h:outputLabel for="postalCode" value="#{msg.dealerdetail_postcode}:" styleClass="c2cClass3" /></td>
                      <td>
                          <h:panelGroup id="postalCodeGroup">
                              <h:inputText id="postalCode" size="40" value="#{dealerDetail.address.postalCode}" styleClass="SelectorTextBox" rendered="#{!dealerDetail.address.renderPostalCodeDropdown}">
                                  <f:attribute name="countryid" value="#{dealerDetail.address.countryId}"/>
                                  <mw:validatePostalCode />
                                  <a4j:support id="postalCodeEvent" event="onchange" actionListener="#{dealerDetail.address.retrievePostalCodeCity}"  reRender="cityGroup, address, city, houseNumberGroup, postalCodeGroup" ajaxSingle="true" limitToList="true" process="country, houseNumber, address, city" immediate="false" oncomplete="leavePostalcodeField('dealerdetail')"/>
                              </h:inputText>
                          </h:panelGroup>                </td>
                  </tr>
                  <tr>
                      <td><h:outputLabel for="city" value="#{msg.dealerdetail_city}:" styleClass="c2cClass3" /></td>
                      <td>
                          <h:panelGroup id="cityGroup">
                              <h:inputText id="city" size="40" value="#{dealerDetail.address.city}" styleClass="SelectorTextBox" rendered="#{!dealerDetail.address.renderCityDropdown}" disabled="#{dealerDetail.address.disabledCity}" >
                                  <a4j:support id="cityEvent" actionListener="#{dealerDetail.address.retrievePostalCodeCity}" event="onchange" reRender="postalCodeGroup, cityGroup" ajaxSingle="true" limitToList="true" process="country" immediate="false"/>
                              </h:inputText>
                          </h:panelGroup>
                      </td>
                  </tr>