Bug #51768

IRRE - drag and drop sorting of items not possible in Internet Explorer

Added by Torben Hansen almost 2 years ago. Updated 9 months ago.

Status:Resolved Start date:2014-04-20
Priority:Should have Due date:
Assigned To:- % Done:

100%
Category:IRRE Spent time: -
Target version:6.2.0
TYPO3 Version:6.1 Is Regression:No
PHP Version:5.4 Sprint Focus:
Complexity:

Description

In Internet Explorer (tested with 9 and 10), it is not possible to use the drag and drop sorting feature of IRRE for items (see attached screenshot). When clicking on the icon and starting to move the mouse, the item does not move but text on the backend page gets selected.

I have tested this with a FAL file collection (type: selection of files) and also with a powermail form. Both use IRRE and have the possibility to sort the items by using drag and drop. The sorting works fine on Chrome and Firefox but fails on Internet Explorer as described above.

irre-drag-drop-ie.png - Screenshot (2.8 kB) Torben Hansen, 2013-09-05 12:46

backend-irre1.png - 3 media relations (22.4 kB) Torben Hansen, 2014-01-28 16:50

backend-irre2-drag.png - 3 media ralations - first element dragged (17.3 kB) Torben Hansen, 2014-01-28 16:50

Subtasks

Bug #58053: New prototype version hides elements during dragging in IEResolvedJigal van Hemert

Bug #58187: New prototype version produces stack overflow error in IE8ResolvedJigal van Hemert

Related issues

related to Core - Task #55572: Switch IRRE to jQuery Resolved 2014-02-02
related to Core - Bug #55666: Thumbs in FAL have very big sizes Closed 2014-02-04
related to Core - Bug #55176: Old prototype version in backend causes problems with bro... Resolved 2014-01-20

Associated revisions

Revision d913adc0
Added by Daniel Siepmann over 1 year ago

[TASK] IRRE drag and drop sorting now solved using jQuery UI

This also fixes “IRRE - drag and drop sorting of items
not possible in Internet Explorer”.

  • Added jQuery-ui and jQuery to requirejs.
  • Reworked the IRRE-Header HTML and CSS.
  • Sortable is done by jQuery-Ui.

Resolves: #51768
Releases: 6.2
Change-Id: Idd121617f2cd5215604747cd0f18285a73dfed49
Reviewed-on: https://review.typo3.org/27164
Reviewed-by: Frans Saris
Tested-by: Frans Saris
Reviewed-by: Benjamin Mack
Tested-by: Benjamin Mack

Revision 1484cef5
Added by Ernesto Baschny over 1 year ago

[TASK] Updates prototype and scriptaculous, fixing IE9+ issues

Upgrades prototype from 1.6.0.3 to 1.7.1 and scriptaculous
from 1.8.2 to 1.9.0.

Solves the problem with sorting IRRE elements in IE9+, for example.

Resolves: #51768
Releases: 6.2, 6.1, 6.0, 4.7, 4.5
Change-Id: I5ea11b2e926ae0f23d1c6d85a0ff5ba24995eebb
Reviewed-on: https://review.typo3.org/27090
Reviewed-by: Stefan Neufeind
Tested-by: Stefan Neufeind
Reviewed-by: Markus Klein
Tested-by: Markus Klein

Revision 5dd53b1a
Added by Ernesto Baschny over 1 year ago

[TASK] Updates prototype and scriptaculous, fixing IE9+ issues

Upgrades prototype from 1.6.0.3 to 1.7.1 and scriptaculous
from 1.8.2 to 1.9.0.

Solves the problem with sorting IRRE elements in IE9+, for example.

Resolves: #51768
Releases: 6.2, 6.1, 6.0, 4.7, 4.5
Change-Id: I5ea11b2e926ae0f23d1c6d85a0ff5ba24995eebb
Reviewed-on: https://review.typo3.org/29471
Reviewed-by: Markus Klein
Tested-by: Markus Klein

Revision d9e65462
Added by Ernesto Baschny over 1 year ago

[TASK] Updates prototype and scriptaculous, fixing IE9+ issues

Upgrades prototype from 1.6.0.3 to 1.7.1 and scriptaculous
from 1.8.2 to 1.9.0.

Solves the problem with sorting IRRE elements in IE9+, for example.

Resolves: #51768
Releases: 6.2, 6.1, 6.0, 4.7, 4.5
Change-Id: I5ea11b2e926ae0f23d1c6d85a0ff5ba24995eebb
Reviewed-on: https://review.typo3.org/29472
Reviewed-by: Markus Klein
Tested-by: Markus Klein
Reviewed-by: Stefan Neufeind
Tested-by: Stefan Neufeind

Revision f329f762
Added by Ernesto Baschny over 1 year ago

[TASK] Updates prototype and scriptaculous, fixing IE9+ issues

Upgrades prototype from 1.6.0.3 to 1.7.1 and scriptaculous
from 1.8.2 to 1.9.0.

Solves the problem with sorting IRRE elements in IE9+, for example.

Resolves: #51768
Releases: 6.2, 6.1, 6.0, 4.7, 4.5
Change-Id: I5ea11b2e926ae0f23d1c6d85a0ff5ba24995eebb
Reviewed-on: https://review.typo3.org/29473
Reviewed-by: Markus Klein
Tested-by: Markus Klein
Reviewed-by: Stefan Neufeind
Tested-by: Stefan Neufeind

Revision aebc2441
Added by Ernesto Baschny over 1 year ago

[TASK] Updates prototype and scriptaculous, fixing IE9+ issues

Upgrades prototype from 1.6.0.3 to 1.7.1 and scriptaculous
from 1.8.2 to 1.9.0.

Solves the problem with sorting IRRE elements in IE9+, for example.

Resolves: #51768
Releases: 6.2, 6.1, 6.0, 4.7, 4.5
Change-Id: I5ea11b2e926ae0f23d1c6d85a0ff5ba24995eebb
Reviewed-on: https://review.typo3.org/29474
Reviewed-by: Markus Klein
Reviewed-by: Stefan Neufeind
Tested-by: Stefan Neufeind

History

#1 Updated by Lorenz Ulrich over 1 year ago

I can confirm this. Is is IMO a must-fix for LTS since a lot of business customers use Internet Explorer.

#2 Updated by Torben Hansen over 1 year ago

TYPO3 (current 6.2 beta4) comes with old versions of Prototype (1.6.0.3) and Scriptaculous dragdrop.js (1.8.2).

I have debugged this in Scriptaculous drapdrop.js and found out, that the left-click does'nt seem to get recognised in initDrag: function(event). In Internet Explorer, Event.isLeftClick(event) returns false. The isLeftClick function is part of Prototype and in this case, Prototype uses an outdated way of analyzing mousebutton events. The current version of Prototype has been updated to support IE9+ mouse events - see: https://github.com/sstephenson/prototype/blob/1fb9728/src/dom/event.js#L138

I tried just to replace the TYPO3 Prototype 1.6.0.3 with the latest version 1.7.1.0 and the sorting seems to work again. In IE the dragged element disappears as soon as you start a drag-event, but this is another issue. As soon as you drop the dragged element, it is fine again and sorting works in IE.

I also updated both Prototype and Scriptaculous to the latest versons, but this breaks a lot of functions in TYPO3 backend.

At least the problem is identified now, but the question is how to fix it?

Does anybody know something about the upgrade policies for external JS libs in TYPO3 core? Should this bug be fixed in the current versions of Prototype/Scriptaculous that come with TYPO3 or should new versions of Prototype/Scripaculous be used and TYPO3 has to be updated to new functionality of Prototype/Scripaculous?

#3 Updated by Ernesto Baschny over 1 year ago

  • Status changed from New to Accepted
  • Target version set to 6.2.0
  • Is Regression set to No

We do not want to support prototype/scriptaculous in the backend anymore and currently just keep it there for the sake of functionality we've already got in there using these libraries which needs to be replaced first.

Of course we need to get this bug solved somehow.

If we can figure out the bug and solve that in a patched scriptaculous without upgrading the library completely, I would prefer that.

Another alternative would be to replace the Sortable functionality by the equivalent jQuery(-UI) component, which would be the best idea in the long run, as we want to get rid of scriptaculous anyway. But this might be more error prone to achieve.

http://jqueryui.com/sortable/ vs http://madrobby.github.io/scriptaculous/sortable/

If you are interested in trying that out, starting points are typo3/sysext/backend/Resources/Public/JavaScript/jsfunc.inline.js method "createDragAndDropSorting" and typo3/sysext/backend/Classes/Form/Element/InlineElement.php

#4 Updated by Ernesto Baschny over 1 year ago

I did some research and upgraded scriptaculous to 1.9.0 and prototype to 1.7.1 and nothing yet seems to be broken. You should not upgrade the one without upgrading the other in my opinion, as scriptaculous depends on a certain prototype version.

I also updated both Prototype and Scriptaculous to the latest versons, but this breaks a lot of functions in TYPO3 backend

Can you elaborate on that, Torben? What exactly broke?

I currently cannot login with IE11, as I seem to be affected by the "Cookie detection" issue still (#53818) to evaluate how the sorting is doing in this browser.

The version jump is not that high, and also these latest versions of prototype and scriptaculous are pretty old already (2010) and seem to fix IE9 and later issues. So it might be worth to examine this possibility also.

#5 Updated by Gerrit Code Review over 1 year ago

  • Status changed from Accepted to Under Review

Patch set 1 for branch master of project Packages/TYPO3.CMS has been pushed to the review server.
It is available at https://review.typo3.org/27090

#6 Updated by Ernesto Baschny over 1 year ago

See above linked review for updated libraries for potential side-effects. Thanks!

#7 Updated by Torben Hansen over 1 year ago

I also updated both Prototype and Scriptaculous to the latest versons, but this breaks a lot of functions in TYPO3 backend

Can you elaborate on that, Torben? What exactly broke?

I checked out your patch and the problems i ran into (flush cache menu did not work, collapsed IRRE items could not be expanded) did not appear.

Sorting now works in IE (tested with 10 + 11), but as soon as you drag an element, it disappears (see both screenshots). It seems this issue is known in Scriptaculous for a very long time https://github.com/madrobby/scriptaculous/issues/2

Also the elements do have much more height (114px instead of 65px) in IE than on other browsers. I'll create a different issue for that later.

I think I will try to do some tests with JQueryUI sortable.

#8 Updated by Lorenz Ulrich over 1 year ago

I can confirm that it works with IE 10 and FAL. I will test with extensions (e.g. Powermail) before verifying the changeset.

#9 Updated by Alexander Opitz over 1 year ago

There is a report that the drag'n'drop component will fail from Chrome32 on

https://groups.google.com/forum/#!topic/prototype-scriptaculous/SpP4P92r-dk

#10 Updated by Gerrit Code Review over 1 year ago

Patch set 1 for branch master of project Packages/TYPO3.CMS has been pushed to the review server.
It is available at https://review.typo3.org/27164

#11 Updated by Gerrit Code Review over 1 year ago

Patch set 2 for branch master of project Packages/TYPO3.CMS has been pushed to the review server.
It is available at https://review.typo3.org/27164

#12 Updated by Gerrit Code Review over 1 year ago

Patch set 3 for branch master of project Packages/TYPO3.CMS has been pushed to the review server.
It is available at https://review.typo3.org/27164

#13 Updated by Gerrit Code Review over 1 year ago

Patch set 4 for branch master of project Packages/TYPO3.CMS has been pushed to the review server.
It is available at https://review.typo3.org/27164

#14 Updated by Gerrit Code Review over 1 year ago

Patch set 5 for branch master of project Packages/TYPO3.CMS has been pushed to the review server.
It is available at https://review.typo3.org/27164

#15 Updated by Gerrit Code Review over 1 year ago

Patch set 6 for branch master of project Packages/TYPO3.CMS has been pushed to the review server.
It is available at https://review.typo3.org/27164

#16 Updated by Gerrit Code Review over 1 year ago

Patch set 7 for branch master of project Packages/TYPO3.CMS has been pushed to the review server.
It is available at https://review.typo3.org/27164

#17 Updated by Gerrit Code Review over 1 year ago

Patch set 8 for branch master of project Packages/TYPO3.CMS has been pushed to the review server.
It is available at https://review.typo3.org/27164

#18 Updated by Gerrit Code Review over 1 year ago

Patch set 9 for branch master of project Packages/TYPO3.CMS has been pushed to the review server.
It is available at https://review.typo3.org/27164

#19 Updated by Daniel Siepmann over 1 year ago

  • Status changed from Under Review to Resolved
  • % Done changed from 0 to 100

Also available in: Atom PDF