ICEfaces
  1. ICEfaces
  2. ICE-2138

Toggling selectInputDate popup in a modal panelPopup causes the overlay to cover entire screen

    Details

    • Type: Bug Bug
    • Status: Closed
    • Priority: Major Major
    • Resolution: Fixed
    • Affects Version/s: 1.6.1
    • Fix Version/s: 1.6.2
    • Component/s: ICE-Components
    • Labels:
      None
    • Environment:
      n/a

      Description

      If using a selectInputDate with renderAsPopup="true" inside of a modal panelPopup, when toggling the popup state of the calendar, the modal overlay will extend to cover the entire page
      1. Test_CalendarInPopup.zip
        5.30 MB
        Philip Breau
      2. Test_CalendarInPopup.zip
        4.73 MB
        Philip Breau
      1. screenshot-1.jpg
        145 kB
      2. screenshot-2.jpg
        149 kB

        Activity

        Hide
        Philip Breau added a comment -

        suggested fix: stop the modal overlay if it's running before any submit

        Index: D:/Documents and Settings/pbreau/workspace/ICEfaces/bridge/lib/extras/style.js
        ===================================================================
        — D:/Documents and Settings/pbreau/workspace/ICEfaces/bridge/lib/extras/style.js (revision 14846)
        +++ D:/Documents and Settings/pbreau/workspace/ICEfaces/bridge/lib/extras/style.js (working copy)
        @@ -193,7 +193,13 @@
        return Ice.modal.containedInId(parent, id);
        }
        return false;

        • }
          + },
          +
          + reset:function()
          Unknown macro: {+ if( Ice.modal.running ){ + Ice.modal.stop( Ice.modal.id ); + }+ }

        };
        Index: D:/Documents and Settings/pbreau/workspace/ICEfaces/bridge/src/submit.js
        ===================================================================
        — D:/Documents and Settings/pbreau/workspace/ICEfaces/bridge/src/submit.js (revision 14846)
        +++ D:/Documents and Settings/pbreau/workspace/ICEfaces/bridge/src/submit.js (working copy)
        @@ -49,6 +49,7 @@
        }
        }).send();
        resetHiddenFieldsFor(form);
        + Ice.modal.reset();
        }

        function iceSubmit(aForm, aComponent, anEvent)

        { @@ -93,6 +94,7 @@ }

        resetHiddenFieldsFor(aForm);
        + Ice.modal.reset();
        }

        Show
        Philip Breau added a comment - suggested fix: stop the modal overlay if it's running before any submit Index: D:/Documents and Settings/pbreau/workspace/ICEfaces/bridge/lib/extras/style.js =================================================================== — D:/Documents and Settings/pbreau/workspace/ICEfaces/bridge/lib/extras/style.js (revision 14846) +++ D:/Documents and Settings/pbreau/workspace/ICEfaces/bridge/lib/extras/style.js (working copy) @@ -193,7 +193,13 @@ return Ice.modal.containedInId(parent, id); } return false; } + }, + + reset:function() Unknown macro: {+ if( Ice.modal.running ){ + Ice.modal.stop( Ice.modal.id ); + }+ } }; Index: D:/Documents and Settings/pbreau/workspace/ICEfaces/bridge/src/submit.js =================================================================== — D:/Documents and Settings/pbreau/workspace/ICEfaces/bridge/src/submit.js (revision 14846) +++ D:/Documents and Settings/pbreau/workspace/ICEfaces/bridge/src/submit.js (working copy) @@ -49,6 +49,7 @@ } }).send(); resetHiddenFieldsFor(form); + Ice.modal.reset(); } function iceSubmit(aForm, aComponent, anEvent) { @@ -93,6 +94,7 @@ } resetHiddenFieldsFor(aForm); + Ice.modal.reset(); }
        Hide
        Philip Breau added a comment -

        Test case (Eclipse WTP web project)

        Show
        Philip Breau added a comment - Test case (Eclipse WTP web project)
        Hide
        Philip Breau added a comment -

        Test Case (Eclipse WTP proj) showing suggested workaround failing

        steps to reproduce:
        1. Select "show modal popup" checkbox
        2. In modal popup select the 2nd tab, "Sessions"
        3. Select a date for "From" date.
        4. Click on the "To" date popup button

        The popup should then become covered by the modal overlay. It seems that this is associated with a dom update for the entire form.

        Show
        Philip Breau added a comment - Test Case (Eclipse WTP proj) showing suggested workaround failing steps to reproduce: 1. Select "show modal popup" checkbox 2. In modal popup select the 2nd tab, "Sessions" 3. Select a date for "From" date. 4. Click on the "To" date popup button The popup should then become covered by the modal overlay. It seems that this is associated with a dom update for the entire form.
        Hide
        Michael Thiem added a comment -

        actually, this seems not only to be an issue when a selectInput component is used inside
        a modal popup. trying to set the modal panel popup's style dynamically via an actionListener
        causes the exact same problem.

        Show
        Michael Thiem added a comment - actually, this seems not only to be an issue when a selectInput component is used inside a modal popup. trying to set the modal panel popup's style dynamically via an actionListener causes the exact same problem.
        Hide
        yip.ng added a comment -

        Screenshot showing the problem

        Show
        yip.ng added a comment - Screenshot showing the problem
        Hide
        yip.ng added a comment -

        Screenshot after the fix.

        Show
        yip.ng added a comment - Screenshot after the fix.
        Hide
        yip.ng added a comment -

        The suggested fix doesn't really work. It only appeared to work initially, by chance. If you click more times, the problem will reappear.

        The real root cause is the bugs in Ice.modal.start().

        Show
        yip.ng added a comment - The suggested fix doesn't really work. It only appeared to work initially, by chance. If you click more times, the problem will reappear. The real root cause is the bugs in Ice.modal.start().
        Hide
        yip.ng added a comment -

        To test:

        In component-showcase\web\inc\layoutPanels\panelPopup.jspx, in the modal popup element, replace the <ice:outputText/> with the following:

        <ice:selectInputDate id="dateFrom" renderAsPopup="true"/>
        <ice:selectInputDate id="dateTo" renderAsPopup="true"/>

        Show
        yip.ng added a comment - To test: In component-showcase\web\inc\layoutPanels\panelPopup.jspx, in the modal popup element, replace the <ice:outputText/> with the following: <ice:selectInputDate id="dateFrom" renderAsPopup="true"/> <ice:selectInputDate id="dateTo" renderAsPopup="true"/>
        Hide
        yip.ng added a comment -

        Changes applied to 1.6 branch.

        Show
        yip.ng added a comment - Changes applied to 1.6 branch.

          People

          • Assignee:
            Unassigned
            Reporter:
            Philip Breau
          • Votes:
            0 Vote for this issue
            Watchers:
            0 Start watching this issue

            Dates

            • Created:
              Updated:
              Resolved: