ICEfaces
  1. ICEfaces
  2. ICE-5509

Draggable popup becomes attached to cursor in IE

    Details

    • Type: Bug Bug
    • Status: Closed
    • Priority: Major Major
    • Resolution: Fixed
    • Affects Version/s: 1.8.2-EE-GA
    • Fix Version/s: 1.8.3, 1.8.2-EE-GA_P02
    • Component/s: ICE-Components
    • Labels:
      None
    • Environment:
      IE7

      Description

      Using the component showcase and IE7, drag the panelPopup upwards towards the top of IE7 so that the cursor leaves the viewing area. Release the mouse and return back to the main page area and notice that the popup is now stuck to the cursor. You need to re-click the popup in order for this to stop.

        Activity

        Tyler Johnson created issue -
        Tyler Johnson made changes -
        Field Original Value New Value
        Salesforce Case [50070000007z8VS]
        Tyler Johnson made changes -
        Attachment sc8015.war [ 12267 ]
        Ken Fyten made changes -
        Fix Version/s 1.8.2-EE-GA_P01 [ 10220 ]
        Fix Version/s 1.8.3 [ 10211 ]
        Assignee Yip Ng [ yip.ng ]
        Hide
        yip.ng added a comment - - edited

        Scriptaculous uses the mouse up event to detect the end of dragging. In IE, seems when you drag outside of the viewport, no mouse up event (or any mouse event?) is fired at all. The demo at the Scriptaculous website works the same. See video at http://screencast.com/t/MTRlMWNhOWUt.

        In FF, it works as expected. See video at http://screencast.com/t/OTliN2VhMjAt. (In our component we have changed to make the panel snap back into the viewport.)

        Show
        yip.ng added a comment - - edited Scriptaculous uses the mouse up event to detect the end of dragging. In IE, seems when you drag outside of the viewport, no mouse up event (or any mouse event?) is fired at all. The demo at the Scriptaculous website works the same. See video at http://screencast.com/t/MTRlMWNhOWUt . In FF, it works as expected. See video at http://screencast.com/t/OTliN2VhMjAt . (In our component we have changed to make the panel snap back into the viewport.)
        Hide
        yip.ng added a comment - - edited

        Tried using mouse move events to detect when dragging reaches the viewport border. (pointerX or pointerY = 0.) Because the mouse move events are amalgamated, this would only work if we moved very slowly. Even then it would be confusing to the user, because the mouse listeners would be canceled, even though the use hasn't released the mouse button, and the user has to release and press the mouse button again to drag again.

        Show
        yip.ng added a comment - - edited Tried using mouse move events to detect when dragging reaches the viewport border. (pointerX or pointerY = 0.) Because the mouse move events are amalgamated, this would only work if we moved very slowly. Even then it would be confusing to the user, because the mouse listeners would be canceled, even though the use hasn't released the mouse button, and the user has to release and press the mouse button again to drag again.
        Hide
        yip.ng added a comment -

        Tried using onmouseout on document. At first glance it appeared to work, but then strange things started to happen: panel jumps from place to place, panel stops responding to dragging, ...

        On further investigation, found that onmouseout seems to occur in all the elements in the document but the document itself. Still no way to tell when the mouse cursor is leaving the document or viewport. See video at http://screencast.com/t/NzY2MTIzOG.

        Show
        yip.ng added a comment - Tried using onmouseout on document. At first glance it appeared to work, but then strange things started to happen: panel jumps from place to place, panel stops responding to dragging, ... On further investigation, found that onmouseout seems to occur in all the elements in the document but the document itself. Still no way to tell when the mouse cursor is leaving the document or viewport. See video at http://screencast.com/t/NzY2MTIzOG .
        Hide
        yip.ng added a comment -

        Tried body element. Same results.

        Tried window object. No response at all.

        Tried detecting mouse button up or down state. Again, it appeared to work at first, but breaks down when more scenarios are tried. Need further investigation on this.

        Show
        yip.ng added a comment - Tried body element. Same results. Tried window object. No response at all. Tried detecting mouse button up or down state. Again, it appeared to work at first, but breaks down when more scenarios are tried. Need further investigation on this.
        Repository Revision Date User Message
        ICEsoft Public SVN Repository #21014 Fri Mar 19 13:37:42 MDT 2010 yip.ng ICE-5509: Draggable popup becomes attached to cursor in IE.
        Files Changed
        Commit graph MODIFY /icefaces/trunk/icefaces/component/src/com/icesoft/faces/component/panelpopup/PanelPopupRenderer.java
        Commit graph MODIFY /icefaces/trunk/icefaces/bridge/lib/scriptaculous/dragdrop.js
        Hide
        yip.ng added a comment -

        Changed to work like in YUI dialog. See video at http://screencast.com/t/NzlmOTZl.

        Show
        yip.ng added a comment - Changed to work like in YUI dialog. See video at http://screencast.com/t/NzlmOTZl .
        Hide
        yip.ng added a comment -

        Revision: 21014


        Modified : /icefaces/trunk/icefaces/bridge/lib/scriptaculous/dragdrop.js
        Modified : /icefaces/trunk/icefaces/component/src/com/icesoft/faces/component/panelpopup/PanelPopupRenderer.java

        Revision: 21015


        Modified : /icefaces-ee/branches/icefaces-ee-1.8.2_p01/icefaces/bridge/lib/scriptaculous/dragdrop.js
        Modified : /icefaces-ee/branches/icefaces-ee-1.8.2_p01/icefaces/component/src/com/icesoft/faces/component/panelpopup/PanelPopupRenderer.java

        Show
        yip.ng added a comment - Revision: 21014 Modified : /icefaces/trunk/icefaces/bridge/lib/scriptaculous/dragdrop.js Modified : /icefaces/trunk/icefaces/component/src/com/icesoft/faces/component/panelpopup/PanelPopupRenderer.java Revision: 21015 Modified : /icefaces-ee/branches/icefaces-ee-1.8.2_p01/icefaces/bridge/lib/scriptaculous/dragdrop.js Modified : /icefaces-ee/branches/icefaces-ee-1.8.2_p01/icefaces/component/src/com/icesoft/faces/component/panelpopup/PanelPopupRenderer.java
        yip.ng made changes -
        Status Open [ 1 ] Resolved [ 5 ]
        Resolution Fixed [ 1 ]
        Joanne Bai made changes -
        Assignee Yip Ng [ yip.ng ] Joanne Bai [ joanne_bai ]
        Hide
        Joanne Bai added a comment -

        Issue does not seem resolved. It's still reproducible with showcase (both jsp and facelets).
        Tested on ICEfaces-ee-1.8.2 revision 21027using Tomcat 6 + IE7,8 (Caches are all cleaned before the testing.)

        Show
        Joanne Bai added a comment - Issue does not seem resolved. It's still reproducible with showcase (both jsp and facelets). Tested on ICEfaces-ee-1.8.2 revision 21027using Tomcat 6 + IE7,8 (Caches are all cleaned before the testing.)
        Ken Fyten made changes -
        Resolution Fixed [ 1 ]
        Status Resolved [ 5 ] Reopened [ 4 ]
        Assignee Joanne Bai [ joanne_bai ] Yip Ng [ yip.ng ]
        Hide
        yip.ng added a comment -

        Still can't reproduce on my machine. I have built the war file (EE 1.8.2 JSP using ant build) and deployed on Tomcat 6. Please test:

        http://10.18.39.130:8080/component-showcase

        Show
        yip.ng added a comment - Still can't reproduce on my machine. I have built the war file (EE 1.8.2 JSP using ant build) and deployed on Tomcat 6. Please test: http://10.18.39.130:8080/component-showcase
        Hide
        Joanne Bai added a comment -

        Yip, I cannot reproduce using your application (tried IE6,7,8). What is your Tomcat 6 version? Thanks.

        Show
        Joanne Bai added a comment - Yip, I cannot reproduce using your application (tried IE6,7,8). What is your Tomcat 6 version? Thanks.
        Hide
        yip.ng added a comment -

        C:\apache-tomcat-6.0.16

        Show
        yip.ng added a comment - C:\apache-tomcat-6.0.16
        Hide
        Joanne Bai added a comment -

        Sorry, Yip. I used the wrong 1.8.2-ee branch to verify.

        Verified successfully on icefaces-ee-1.8.2_p01 revision 21058 using component showcase jsp and facelets-enh
        Verified on IE6,7,8 + Tomcat 6.0.26

        Show
        Joanne Bai added a comment - Sorry, Yip. I used the wrong 1.8.2-ee branch to verify. Verified successfully on icefaces-ee-1.8.2_p01 revision 21058 using component showcase jsp and facelets-enh Verified on IE6,7,8 + Tomcat 6.0.26
        Joanne Bai made changes -
        Status Reopened [ 4 ] Closed [ 6 ]
        Resolution Fixed [ 1 ]
        Repository Revision Date User Message
        ICEsoft Public SVN Repository #21126 Wed Mar 31 15:38:34 MDT 2010 yip.ng ICE-5509: Reverted changes. Caused problems for positioned panels.
        Files Changed
        Commit graph MODIFY /icefaces/trunk/icefaces/component/src/com/icesoft/faces/component/panelpopup/PanelPopupRenderer.java
        Commit graph MODIFY /icefaces/trunk/icefaces/bridge/lib/scriptaculous/dragdrop.js
        Hide
        yip.ng added a comment -

        Reverted changes. Caused problems for positioned panels. See ICE-5561.

        These are the original changes, in case some customer needs a patch. But be warned that they will break positioned panels.

        Index: ../../svn/ossrepo/icefaces/trunk/icefaces/component/src/com/icesoft/faces/component/panelpopup/PanelPopupRenderer.java
        ===================================================================
        — ../../svn/ossrepo/icefaces/trunk/icefaces/component/src/com/icesoft/faces/component/panelpopup/PanelPopupRenderer.java (revision 21005)
        +++ ../../svn/ossrepo/icefaces/trunk/icefaces/component/src/com/icesoft/faces/component/panelpopup/PanelPopupRenderer.java (revision 21014)
        @@ -253,7 +253,7 @@

        // Rebroadcast Javascript to survive refresh
        if (dndType != null) {

        • JavascriptContext.addJavascriptCall(facesContext, "Ice.DnD.adjustPosition('" + uiComponent.getClientId(facesContext) + "');");
          +// JavascriptContext.addJavascriptCall(facesContext, "Ice.DnD.adjustPosition('" + uiComponent.getClientId(facesContext) + "');");
          StringBuffer dropCall = new StringBuffer();
          String call = addJavascriptCalls(uiComponent, "DRAG", handleId,
          facesContext, dropCall);

        Index: ../../svn/ossrepo/icefaces/trunk/icefaces/bridge/lib/scriptaculous/dragdrop.js
        ===================================================================
        — ../../svn/ossrepo/icefaces/trunk/icefaces/bridge/lib/scriptaculous/dragdrop.js (revision 18841)
        +++ ../../svn/ossrepo/icefaces/trunk/icefaces/bridge/lib/scriptaculous/dragdrop.js (revision 21014)
        @@ -188,6 +188,10 @@

        updateDrag: function(event) {
        if (!this.activeDraggable) return;
        + if (Prototype.Browser.IE && !(event.button % 2))

        { + this.endDrag(event); + return; + }

        var pointer = [Event.pointerX(event), Event.pointerY(event)];
        // Mozilla-based browsers fire successive mousemove events with
        // the same coordinates, prevent needless redrawing (moz bug?)
        @@ -550,6 +554,28 @@
        if ((!this.options.constraint) || (this.options.constraint == 'vertical'))
        style.top = p[1] + "px";

        + var vpDims = document.viewport.getDimensions();
        + var dims = this.element.getDimensions();
        + var vpOffset = this.element.viewportOffset();
        + var posOffset = this.element.positionedOffset();
        + var diff = vpOffset.left + dims.width - (vpDims.width - 10);
        + if (diff > 0)

        { + style.left = (posOffset.left - diff) + "px"; + }

        + diff = vpOffset.top + dims.height - (vpDims.height - 10);
        + if (diff > 0)

        { + style.top = (posOffset.top - diff) + "px"; + }

        + vpOffset = this.element.viewportOffset();
        + posOffset = this.element.positionedOffset();
        + diff = 10 - vpOffset.left;
        + if (diff > 0)

        { + style.left = (posOffset.left + diff) + "px"; + }

        + diff = 10 - vpOffset.top;
        + if (diff > 0)

        { + style.top = (posOffset.top + diff) + "px"; + }

        if (style.visibility == "hidden") style.visibility = ""; // fix gecko rendering
        },

        Show
        yip.ng added a comment - Reverted changes. Caused problems for positioned panels. See ICE-5561. These are the original changes, in case some customer needs a patch. But be warned that they will break positioned panels. Index: ../../svn/ossrepo/icefaces/trunk/icefaces/component/src/com/icesoft/faces/component/panelpopup/PanelPopupRenderer.java =================================================================== — ../../svn/ossrepo/icefaces/trunk/icefaces/component/src/com/icesoft/faces/component/panelpopup/PanelPopupRenderer.java (revision 21005) +++ ../../svn/ossrepo/icefaces/trunk/icefaces/component/src/com/icesoft/faces/component/panelpopup/PanelPopupRenderer.java (revision 21014) @@ -253,7 +253,7 @@ // Rebroadcast Javascript to survive refresh if (dndType != null) { JavascriptContext.addJavascriptCall(facesContext, "Ice.DnD.adjustPosition('" + uiComponent.getClientId(facesContext) + "');"); +// JavascriptContext.addJavascriptCall(facesContext, "Ice.DnD.adjustPosition('" + uiComponent.getClientId(facesContext) + "');"); StringBuffer dropCall = new StringBuffer(); String call = addJavascriptCalls(uiComponent, "DRAG", handleId, facesContext, dropCall); Index: ../../svn/ossrepo/icefaces/trunk/icefaces/bridge/lib/scriptaculous/dragdrop.js =================================================================== — ../../svn/ossrepo/icefaces/trunk/icefaces/bridge/lib/scriptaculous/dragdrop.js (revision 18841) +++ ../../svn/ossrepo/icefaces/trunk/icefaces/bridge/lib/scriptaculous/dragdrop.js (revision 21014) @@ -188,6 +188,10 @@ updateDrag: function(event) { if (!this.activeDraggable) return; + if (Prototype.Browser.IE && !(event.button % 2)) { + this.endDrag(event); + return; + } var pointer = [Event.pointerX(event), Event.pointerY(event)] ; // Mozilla-based browsers fire successive mousemove events with // the same coordinates, prevent needless redrawing (moz bug?) @@ -550,6 +554,28 @@ if ((!this.options.constraint) || (this.options.constraint == 'vertical')) style.top = p [1] + "px"; + var vpDims = document.viewport.getDimensions(); + var dims = this.element.getDimensions(); + var vpOffset = this.element.viewportOffset(); + var posOffset = this.element.positionedOffset(); + var diff = vpOffset.left + dims.width - (vpDims.width - 10); + if (diff > 0) { + style.left = (posOffset.left - diff) + "px"; + } + diff = vpOffset.top + dims.height - (vpDims.height - 10); + if (diff > 0) { + style.top = (posOffset.top - diff) + "px"; + } + vpOffset = this.element.viewportOffset(); + posOffset = this.element.positionedOffset(); + diff = 10 - vpOffset.left; + if (diff > 0) { + style.left = (posOffset.left + diff) + "px"; + } + diff = 10 - vpOffset.top; + if (diff > 0) { + style.top = (posOffset.top + diff) + "px"; + } if (style.visibility == "hidden") style.visibility = ""; // fix gecko rendering },
        yip.ng made changes -
        Resolution Fixed [ 1 ]
        Status Closed [ 6 ] Reopened [ 4 ]
        Ken Fyten made changes -
        Fix Version/s 1.8.3 [ 10211 ]
        Fix Version/s 1.8.2-EE-GA_P01 [ 10220 ]
        Ken Fyten made changes -
        Fix Version/s 1.8.2-EE-GA_P02 [ 10226 ]
        Fix Version/s 1.8.3 [ 10211 ]
        Repository Revision Date User Message
        ICEsoft Public SVN Repository #21175 Wed Apr 07 17:03:19 MDT 2010 yip.ng ICE-5509: Draggable popup becomes attached to cursor in IE. New fix.
        Files Changed
        Commit graph MODIFY /icefaces/trunk/icefaces/bridge/lib/scriptaculous/dragdrop.js
        Hide
        yip.ng added a comment -

        Mouse button state (up or down) seems to change randomly for positioned panels. No good. Changed to use mouse out and toElement = null to detect mouse outside of window. Also, cancel changes to simulate YUI dialog behavior in case they cause more side effects.

        Revision: 21175


        Modified : /icefaces/trunk/icefaces/bridge/lib/scriptaculous/dragdrop.js

        Show
        yip.ng added a comment - Mouse button state (up or down) seems to change randomly for positioned panels. No good. Changed to use mouse out and toElement = null to detect mouse outside of window. Also, cancel changes to simulate YUI dialog behavior in case they cause more side effects. Revision: 21175 Modified : /icefaces/trunk/icefaces/bridge/lib/scriptaculous/dragdrop.js
        yip.ng made changes -
        Status Reopened [ 4 ] Resolved [ 5 ]
        Resolution Fixed [ 1 ]
        Ken Fyten made changes -
        Status Resolved [ 5 ] Closed [ 6 ]
        Assignee Yip Ng [ yip.ng ]
        Ken Fyten made changes -
        Resolution Fixed [ 1 ]
        Status Closed [ 6 ] Reopened [ 4 ]
        Assignee Priority P1
        Ken Fyten made changes -
        Status Reopened [ 4 ] Resolved [ 5 ]
        Assignee Priority P1
        Resolution Fixed [ 1 ]
        Tyler Johnson made changes -
        Attachment ICE-5509-patch.rtf [ 12614 ]
        Ken Fyten made changes -
        Status Resolved [ 5 ] Closed [ 6 ]

          People

          • Assignee:
            Unassigned
            Reporter:
            Tyler Johnson
          • Votes:
            0 Vote for this issue
            Watchers:
            0 Start watching this issue

            Dates

            • Created:
              Updated:
              Resolved: