New issue
Advanced search Search tips

Issue 860040 link

Starred by 2 users

Issue metadata

Status: Available
Owner: ----
Components:
EstimatedDays: ----
NextAction: ----
OS: Mac
Pri: 3
Type: Bug



Sign in to add a comment

OPTION elements will not emit drag or drop events even in listbox SELECT

Reported by cont...@tdhsmith.com, Jul 3

Issue description

UserAgent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_12_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/67.0.3396.99 Safari/537.36

Steps to reproduce the problem:
Creation:
1. Create a <select> box with one or more <option> elements.
2. Set draggable="true" on 1 or more option(s)
3. Assign a dragstart event handler to the draggable option(s)

Interaction:
4. Attempt to drag the option(s) anywhere on the screen
5: Attempt to drop the option(s) onto a valid drop site

What is the expected behavior?
During step 4, the browser should fire a dragstart event. In the test case, this should log to the console "OPTION <#> drag start <DragEvent details>". This process should also offer a visual cue of the drag (i.e. a faded DragImage of the original element).

After step 5, the browser should've emitted DragEnter, DragOver, and Drop events for the drop site. Again, in the test case, these will all log messages to the console.

What went wrong?
The option element does not trigger any drag/drop events or interactions.

I'm primarily concerned with options inside "non-dropdown" <select> parents, whose size attribute is greater than 1, since these components  have more straightforward user interaction and the omission of drag support is more glaring. However the problem does seem to exist for dropdowns as well.

Did this work before? N/A 

Does this work in other browsers? Yes

Chrome version: 67.0.3396.99  Channel: stable
OS Version: OS X 10.12.6
Flash Version: 

Confirmed working in Firefox 62.0b5 for Mac. I believe these results are OS-independent and reach back several versions, but don't have access to test at the moment.

A user on StackOverflow identified this as a bug ~5 years ago here: https://stackoverflow.com/questions/16439032/drag-and-drop-in-select-element-google-chrome

W3C editor's draft HTML spec for `draggable`: http://w3c.github.io/html/editing.html#the-draggable-attribute
 
poc.html
1.0 KB View Download
Labels: Needs-Triage-M67
Components: Blink>Forms>Select Blink>DataTransfer
Components: -Blink>DataTransfer
Labels: -Pri-2 -Needs-Triage-M67 Pri-3
Status: Available (was: Unconfirmed)
Summary: OPTION elements will not emit drag or drop events even in listbox SELECT (was: Option elements will not emit drag or drop events)
As for dropdown-style SELECT, this is almost "work as intended" for now because we don't dispatch any UI events in SELECT dropdowns.

As for listbox-style SELECT, this is a bug.
mousedown + mousemove is handled as multiple OPTIONs selection, and we skip drag processing. It's unnecessary for SELECT without 'multiple' attribute.

It seems we can't select multiple OPTIONs by mouse drag in Firefox if the SELECT has 'multiple' and OPTIONs have 'draggable'.

I did confirm this bug occurs in Chrome 67.0.3396.99 for Windows 10, but does not appear in Firefox 61.0.1 or Microsoft Edge 42.17134.1.0 (although in the Edge case, the draggable attribute seems to interfere with regular click-to-select mechanics; you can't select an item simply by clicking).

Excluding the dropdown makes sense.

Sign in to add a comment