ICEmobile
  1. ICEmobile
  2. MOBI-994

menuItem in menuButtons disappears in IE9 after submit

    Details

    • Type: Bug Bug
    • Status: Resolved
    • Priority: Major Major
    • Resolution: Fixed
    • Affects Version/s: EE 1.3.0.GA_P01
    • Fix Version/s: 1.3.1
    • Component/s: Faces
    • Labels:
      None
    • Environment:
      jsf 2 icefaces 3, 4
    • Salesforce Case Reference:

      Description

      see attached movie file. Am creating test case to attach to the Jira.

        Activity

        Hide
        Judy Guglielmin added a comment -

        able to reproduce in test case with following page:-
        <h:body>
        <mobi:pagePanel>
        <f:facet name="header">
        header
        </f:facet>
        <f:facet name="body">
        <mobi:largeView>
        <mobi:tabSet id="mainTabSet"
        selectedId="#

        {navigationBean.currentTabId}

        "
        autoWidth="true"
        fitToParent="#

        {layoutBean.fixedPosition}"
        orientation="#{layoutBean.orientation}">

        <mobi:contentPane title="Messaging" id="msgingTab" facelet="false"
        client="true">

        <mobi:splitPane columnDivider="10">
        <f:facet name="left">
        <h:form id="messagingOptionsForm">
        <h:panelGroup>
        <mobi:contentStackMenu id="mnu" contentStackId="largeStack"
        selectedPane="#{navigationBean.twoColSelectedPane}">
        <mobi:contentMenuItem label="Messaging" />
        <li class="mobi-list-item"><h:panelGroup style="float:left">
        <mobi:menuButton id="selectedPanel" style="float:right"
        buttonLabel="Action" >
        <mobi:menuButtonItem label="FirstPanel"
        value="inboxPanel"
        actionListener="#{navigationBean.setPaneAction}" />

        <mobi:menuButtonItem label="Shipper At Risk"
        value="shipperAtRiskPanel"
        actionListener="#{navigationBean.setPaneAction}" />
        <mobi:menuButtonItem label="another panel"
        value="anotherPanel"
        actionListener="#{navigationBean.setPaneAction}" />
        </mobi:menuButton>
        </h:panelGroup>
        </li>
        </mobi:contentStackMenu>
        </h:panelGroup>
        </h:form>
        </f:facet>
        <f:facet name="right">
        <mobi:contentStack id="largeStack"
        currentId="#{navigationBean.twoColSelectedPane}"
        contentMenuId="mnu">
        <mobi:contentPane id="inboxPanel">
        <mobi:fieldsetGroup>
        <mobi:fieldsetRow>
        <h:form id="inboxForm">
        <ace:dataTable id="inboxList"
        value="#{dataViewBean.cars}"
        var="currMsg" paginator="true"
        rows="10">
        <ace:column headerText="Actions">
        <h:outputText value="test col1" />
        </ace:column>
        <ace:column headerText="2nd col">
        <h:outputText value="test col2" />
        </ace:column>
        </ace:dataTable>
        </h:form>
        </mobi:fieldsetRow>
        </mobi:fieldsetGroup>
        </mobi:contentPane>
        <mobi:contentPane id="shipperAtRiskPanel">
        <h3>shipper at risk panel</h3>
        </mobi:contentPane>
        <mobi:contentPane id="anotherPanel">
        <h3>anotherPanel</h3>
        </mobi:contentPane>
        </mobi:contentStack>
        </f:facet>
        </mobi:splitPane>
        </mobi:contentPane>
        <mobi:contentPane id="pane2" title="Settings" client="true">
        <h3>TabSet Settings</h3>
        <h:form id="selection">
        <mobi:fieldsetGroup>
        <mobi:fieldsetRow>
        <h:outputLabel for="selectOr" value="Orientation:-"/>
        <h:selectOneMenu id="selectOr" value="#{layoutBean.orientation}">
        <f:selectItem itemValue="top" itemLabel="Top"/>
        <f:selectItem itemValue="bottom" itemLabel="Bottom" />
        <f:ajax execute="@this" render="@all"/>
        </h:selectOneMenu>
        </mobi:fieldsetRow>
        <mobi:fieldsetRow>
        <h:outputLabel for="fixedPosition" value="FixedPosition:" />
        <mobi:flipswitch id="fixedPosition" value="#{layoutBean.fixedPosition}

        " singleSubmit="true"/>
        </mobi:fieldsetRow>
        </mobi:fieldsetGroup>
        </h:form>
        </mobi:contentPane>

        </mobi:tabSet>
        </mobi:largeView>
        </f:facet>
        </mobi:pagePanel>
        </h:body>

        ....note that the values are still in the page, just not showing:-
        here is the markup for the attached screen shot
        <span id="messagingOptionsForm:mnu:selectedPanel_btn" class="mobi-menu-btn-btn mobi-button ui-btn-up-c">
        <span>Action</span>
        </span><select id="messagingOptionsForm:mnu:selectedPanel_sel" onchange="ice.mobi.menubutton.select('messagingOptionsForm:mnu:selectedPanel');" class="mobi-menu-btn-menu" name="messagingOptionsForm:mnu:selectedPanel_sel">
        <option value="">Select</option>FirstPanelShipper At Riskanother panel</select>

        when looking at the markup in developer's tools it appears correct, but when copying innerHTML, you can see that it no longer appears accurate (the option is not getting rendered, just the label for the option.
        (see screenshot).

        Show
        Judy Guglielmin added a comment - able to reproduce in test case with following page:- <h:body> <mobi:pagePanel> <f:facet name="header"> header </f:facet> <f:facet name="body"> <mobi:largeView> <mobi:tabSet id="mainTabSet" selectedId="# {navigationBean.currentTabId} " autoWidth="true" fitToParent="# {layoutBean.fixedPosition}" orientation="#{layoutBean.orientation}"> <mobi:contentPane title="Messaging" id="msgingTab" facelet="false" client="true"> <mobi:splitPane columnDivider="10"> <f:facet name="left"> <h:form id="messagingOptionsForm"> <h:panelGroup> <mobi:contentStackMenu id="mnu" contentStackId="largeStack" selectedPane="#{navigationBean.twoColSelectedPane}"> <mobi:contentMenuItem label="Messaging" /> <li class="mobi-list-item"><h:panelGroup style="float:left"> <mobi:menuButton id="selectedPanel" style="float:right" buttonLabel="Action" > <mobi:menuButtonItem label="FirstPanel" value="inboxPanel" actionListener="#{navigationBean.setPaneAction}" /> <mobi:menuButtonItem label="Shipper At Risk" value="shipperAtRiskPanel" actionListener="#{navigationBean.setPaneAction}" /> <mobi:menuButtonItem label="another panel" value="anotherPanel" actionListener="#{navigationBean.setPaneAction}" /> </mobi:menuButton> </h:panelGroup> </li> </mobi:contentStackMenu> </h:panelGroup> </h:form> </f:facet> <f:facet name="right"> <mobi:contentStack id="largeStack" currentId="#{navigationBean.twoColSelectedPane}" contentMenuId="mnu"> <mobi:contentPane id="inboxPanel"> <mobi:fieldsetGroup> <mobi:fieldsetRow> <h:form id="inboxForm"> <ace:dataTable id="inboxList" value="#{dataViewBean.cars}" var="currMsg" paginator="true" rows="10"> <ace:column headerText="Actions"> <h:outputText value="test col1" /> </ace:column> <ace:column headerText="2nd col"> <h:outputText value="test col2" /> </ace:column> </ace:dataTable> </h:form> </mobi:fieldsetRow> </mobi:fieldsetGroup> </mobi:contentPane> <mobi:contentPane id="shipperAtRiskPanel"> <h3>shipper at risk panel</h3> </mobi:contentPane> <mobi:contentPane id="anotherPanel"> <h3>anotherPanel</h3> </mobi:contentPane> </mobi:contentStack> </f:facet> </mobi:splitPane> </mobi:contentPane> <mobi:contentPane id="pane2" title="Settings" client="true"> <h3>TabSet Settings</h3> <h:form id="selection"> <mobi:fieldsetGroup> <mobi:fieldsetRow> <h:outputLabel for="selectOr" value="Orientation:-"/> <h:selectOneMenu id="selectOr" value="#{layoutBean.orientation}"> <f:selectItem itemValue="top" itemLabel="Top"/> <f:selectItem itemValue="bottom" itemLabel="Bottom" /> <f:ajax execute="@this" render="@all"/> </h:selectOneMenu> </mobi:fieldsetRow> <mobi:fieldsetRow> <h:outputLabel for="fixedPosition" value="FixedPosition:" /> <mobi:flipswitch id="fixedPosition" value="#{layoutBean.fixedPosition} " singleSubmit="true"/> </mobi:fieldsetRow> </mobi:fieldsetGroup> </h:form> </mobi:contentPane> </mobi:tabSet> </mobi:largeView> </f:facet> </mobi:pagePanel> </h:body> ....note that the values are still in the page, just not showing:- here is the markup for the attached screen shot <span id="messagingOptionsForm:mnu:selectedPanel_btn" class="mobi-menu-btn-btn mobi-button ui-btn-up-c"> <span>Action</span> </span><select id="messagingOptionsForm:mnu:selectedPanel_sel" onchange="ice.mobi.menubutton.select('messagingOptionsForm:mnu:selectedPanel');" class="mobi-menu-btn-menu" name="messagingOptionsForm:mnu:selectedPanel_sel"> <option value="">Select</option>FirstPanelShipper At Riskanother panel</select> when looking at the markup in developer's tools it appears correct, but when copying innerHTML, you can see that it no longer appears accurate (the option is not getting rendered, just the label for the option. (see screenshot).
        Hide
        Judy Guglielmin added a comment -

        response from choosing Shipper At Risk option:-
        <?xml version='1.0' encoding='UTF-8'?>
        <partial-response><changes><update id="messagingOptionsForm:mnu:selectedPanel:_t14">
        <Unable to render embedded object: File (mnu:selectedPanel:_t14" name="messagingOptionsForm:mnu:selectedPanel:_t14" singleSubmit="false" value="shipperAtRiskPanel">Shipper At Risk</option>]]></update><update id="messagingOptionsForm:mnu_hidden"><) not found.[CDATA[<input id="messagingOptionsForm:mnu_hidden" name="messagingOptionsForm:mnu_hidden" type="hidden" />]]>.......then contentStack which is all good .....

        then the reset is done. When I step through the debugger, line by line, none of the options disappear (usually in IE9, it's just the one that was chosen). Without stepping through, the option disappears. Makes me wonder if I should not do a timeout after the request and before the reset to try in IE? Could this be a timing problem? Perhaps do the reset with a callback for onAfterUpdate? (or onSuccess & onComplete?).

        Show
        Judy Guglielmin added a comment - response from choosing Shipper At Risk option:- <?xml version='1.0' encoding='UTF-8'?> <partial-response><changes><update id="messagingOptionsForm:mnu:selectedPanel:_t14"> < Unable to render embedded object: File (mnu:selectedPanel:_t14" name="messagingOptionsForm:mnu:selectedPanel:_t14" singleSubmit="false" value="shipperAtRiskPanel">Shipper At Risk</option>]]></update><update id="messagingOptionsForm:mnu_hidden"><) not found. [CDATA [<input id="messagingOptionsForm:mnu_hidden" name="messagingOptionsForm:mnu_hidden" type="hidden" />] ]>.......then contentStack which is all good ..... then the reset is done. When I step through the debugger, line by line, none of the options disappear (usually in IE9, it's just the one that was chosen). Without stepping through, the option disappears. Makes me wonder if I should not do a timeout after the request and before the reset to try in IE? Could this be a timing problem? Perhaps do the reset with a callback for onAfterUpdate? (or onSuccess & onComplete?).
        Hide
        Judy Guglielmin added a comment -

        please review the comments and let me know if you want a test case (using ant or pom for maven) reproducible on the current trunk

        Show
        Judy Guglielmin added a comment - please review the comments and let me know if you want a test case (using ant or pom for maven) reproducible on the current trunk
        Hide
        Philip Breau added a comment -

        I can reproduce this in IE9 now too. I'm not sure exactly why this happening, but there seems to be a problem happening in the DOM update causing this. As mentioned above, a DOM update that includes just the <option> element of the selected menuButtonItem is returned from the server, which may result in a corrupted DOM node with only the text replacing the option element.

        My guess is that this may be happening for the follow reasons.

        • a fundamental problem with the menuButton component rendering invalid <option> markup. The option element is not supposed to have a 'name' attribute, as it is not a basic form element, the parent <select> element is. Changing this with the current component is difficult as the menuButtonItem does it's own decoding.
        • the DOM update code cannot reliably update a single option element, resulting in the corrupted DOM. A workaround may be to force a larger DOM update which includes the parent elements.
        Show
        Philip Breau added a comment - I can reproduce this in IE9 now too. I'm not sure exactly why this happening, but there seems to be a problem happening in the DOM update causing this. As mentioned above, a DOM update that includes just the <option> element of the selected menuButtonItem is returned from the server, which may result in a corrupted DOM node with only the text replacing the option element. My guess is that this may be happening for the follow reasons. a fundamental problem with the menuButton component rendering invalid <option> markup. The option element is not supposed to have a 'name' attribute, as it is not a basic form element, the parent <select> element is. Changing this with the current component is difficult as the menuButtonItem does it's own decoding. the DOM update code cannot reliably update a single option element, resulting in the corrupted DOM. A workaround may be to force a larger DOM update which includes the parent elements.
        Hide
        Philip Breau added a comment -

        A workaround is to force a larger DOM update. In this case, the parent <li> element can have the current selected contentPane bound to it's class attribute like so. This prevents the DOM updates containing single <option> elements:

        <li class="mobi-list-item #

        {navigationBean.twoColSelectedPane}

        ">
        <h:panelGroup style="float:left">
        <mobi:menuButton id="selectedPanel" style="float:right" buttonLabel="Action" >
        <mobi:menuButtonItem label="FirstPanel" id="m1"
        value="inboxPanel"
        actionListener="#

        {navigationBean.setPaneAction}" />
        <mobi:menuButtonItem label="Shipper At Risk" id="m2"
        value="shipperAtRiskPanel"
        actionListener="#{navigationBean.setPaneAction}

        " />
        <mobi:menuButtonItem label="another panel" id="m3"
        value="anotherPanel"
        actionListener="#

        {navigationBean.setPaneAction}

        " />
        </mobi:menuButton>
        </h:panelGroup>
        </li>

        Show
        Philip Breau added a comment - A workaround is to force a larger DOM update. In this case, the parent <li> element can have the current selected contentPane bound to it's class attribute like so. This prevents the DOM updates containing single <option> elements: <li class="mobi-list-item # {navigationBean.twoColSelectedPane} "> <h:panelGroup style="float:left"> <mobi:menuButton id="selectedPanel" style="float:right" buttonLabel="Action" > <mobi:menuButtonItem label="FirstPanel" id="m1" value="inboxPanel" actionListener="# {navigationBean.setPaneAction}" /> <mobi:menuButtonItem label="Shipper At Risk" id="m2" value="shipperAtRiskPanel" actionListener="#{navigationBean.setPaneAction} " /> <mobi:menuButtonItem label="another panel" id="m3" value="anotherPanel" actionListener="# {navigationBean.setPaneAction} " /> </mobi:menuButton> </h:panelGroup> </li>
        Hide
        Philip Breau added a comment -

        From Judy:

        When I stepped through the debugger very slowly (javascript in IE9), I found that I put a breakpoint in the reset() function, then the update happened correctly. Are you sure this isn’t a timing thing? The update is not getting done or crashing with the reset function? I was considering that a timeout (just to test) on the reset might work or to have the reset function triggered on the onAfterUpdate callback. The markup was always good (from my testing yesterday) until the reset hits before or during the update.
        If you update the entire region, you may end up with other problems with the reset function since the elements may not be present to run the reset, correct?

        Show
        Philip Breau added a comment - From Judy: When I stepped through the debugger very slowly (javascript in IE9), I found that I put a breakpoint in the reset() function, then the update happened correctly. Are you sure this isn’t a timing thing? The update is not getting done or crashing with the reset function? I was considering that a timeout (just to test) on the reset might work or to have the reset function triggered on the onAfterUpdate callback. The markup was always good (from my testing yesterday) until the reset hits before or during the update. If you update the entire region, you may end up with other problems with the reset function since the elements may not be present to run the reset, correct?
        Hide
        Philip Breau added a comment -

        Revision: 39760
        Author: philip.breau
        Date: January-23-14 3:32:19 PM
        Message:
        MOBI-994
        menuItem in menuButtons disappears in IE9 after submit

        • render a data-lastselected attribute to force the DOM update to include the entire menuButton
        • also fix invalid snId, pcId, and singleSubmit attributes

          Modified : /icemobile/trunk/icemobile/core/src/main/java/org/icemobile/component/IMenuButton.java
          Modified : /icemobile/trunk/icemobile/core/src/main/java/org/icemobile/renderkit/MenuButtonCoreRenderer.java
          Modified : /icemobile/trunk/icemobile/core/src/main/java/org/icemobile/renderkit/MenuButtonItemCoreRenderer.java
          Modified : /icemobile/trunk/icemobile/jsf/components/component/resources/org.icefaces.component.util/component.js
          Modified : /icemobile/trunk/icemobile/jsf/components/component/src/org/icefaces/mobi/component/menubutton/MenuButtonItemRenderer.java
          Modified : /icemobile/trunk/icemobile/jsf/components/component/src/org/icefaces/mobi/component/menubutton/MenuButtonMeta.java
          Modified : /icemobile/trunk/icemobile/jsp/src/main/java/org/icemobile/jsp/tags/input/MenuButtonTag.java
          Modified : /icemobile/trunk/icemobile/jsp/src/main/javascript/icemobile.js

        Show
        Philip Breau added a comment - Revision: 39760 Author: philip.breau Date: January-23-14 3:32:19 PM Message: MOBI-994 menuItem in menuButtons disappears in IE9 after submit render a data-lastselected attribute to force the DOM update to include the entire menuButton also fix invalid snId, pcId, and singleSubmit attributes Modified : /icemobile/trunk/icemobile/core/src/main/java/org/icemobile/component/IMenuButton.java Modified : /icemobile/trunk/icemobile/core/src/main/java/org/icemobile/renderkit/MenuButtonCoreRenderer.java Modified : /icemobile/trunk/icemobile/core/src/main/java/org/icemobile/renderkit/MenuButtonItemCoreRenderer.java Modified : /icemobile/trunk/icemobile/jsf/components/component/resources/org.icefaces.component.util/component.js Modified : /icemobile/trunk/icemobile/jsf/components/component/src/org/icefaces/mobi/component/menubutton/MenuButtonItemRenderer.java Modified : /icemobile/trunk/icemobile/jsf/components/component/src/org/icefaces/mobi/component/menubutton/MenuButtonMeta.java Modified : /icemobile/trunk/icemobile/jsp/src/main/java/org/icemobile/jsp/tags/input/MenuButtonTag.java Modified : /icemobile/trunk/icemobile/jsp/src/main/javascript/icemobile.js

          People

          • Assignee:
            Philip Breau
            Reporter:
            Judy Guglielmin
          • Votes:
            0 Vote for this issue
            Watchers:
            2 Start watching this issue

            Dates

            • Created:
              Updated:
              Resolved: