Bug #51768: IRRE - drag and drop sorting of items not possible in Internet Explorer - TYPO3 Core - TYPO3 Forge

Actions

Copy link

Bug #51768

closed

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

Added by Torben Hansen about 11 years ago. Updated about 7 years ago.

Status:

Closed

Priority:

Should have

Assignee:

Category:

FormEngine aka TCEforms

Target version:

6.2.0

Start date:

2014-04-20

Due date:

% Done:

100%

Estimated time:

(Total: 0.00 h)

TYPO3 Version:

6.1

PHP Version:

5.4

Tags:

Complexity:

Is Regression:

Sprint Focus:

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.

Files

Download all files

irre-drag-drop-ie.png (2.82 KB) irre-drag-drop-ie.png	Screenshot	Torben Hansen, 2013-09-05 12:46
backend-irre1.png (22.4 KB) backend-irre1.png	3 media relations	Torben Hansen, 2014-01-28 16:50
backend-irre2-drag.png (17.3 KB) backend-irre2-drag.png	3 media ralations - first element dragged	Torben Hansen, 2014-01-28 16:50

Subtasks 2 (0 open — 2 closed)

Related issues 3 (0 open — 3 closed)

Actions

Copy link

Updated by Lorenz Ulrich almost 11 years ago

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

Actions

Copy link

Updated by Torben Hansen almost 11 years 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?

Actions

Copy link

Updated by Ernesto Baschny almost 11 years 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

Actions

Copy link

Updated by Ernesto Baschny almost 11 years 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.

Actions

Copy link

Updated by Gerrit Code Review almost 11 years 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

Actions

Copy link

Updated by Ernesto Baschny almost 11 years ago

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

Actions

Copy link Download all files

Updated by Torben Hansen almost 11 years ago

File backend-irre1.png backend-irre1.png added
File backend-irre2-drag.png backend-irre2-drag.png added

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.

Actions

Copy link