Drag image is broken for dragged elements with shadow dom
Categories
(Core :: DOM: Copy & Paste and Drag & Drop, defect, P3)
Tracking
()
People
(Reporter: pekka, Unassigned)
Details
Attachments
(1 file)
|
8.68 KB,
image/png
|
Details |
screenshot-chrome.png
User Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/77.0.3865.120 Safari/537.36
Steps to reproduce:
- Add a web component which uses shadow dom to the page like <vaadin-combo-box>
- Make the element draggable with adding the draggable attribute and a dragstart listener
- Start dragging the element
See https://glitch.com/~messy-morning
Related to https://bugzilla.mozilla.org/show_bug.cgi?id=1521471 which fixed starting a drag from inside shadow root, but did not fix the drag image creation for those.
Actual results:
The drag image is not created correctly, it is missing completely or missing the parts inside the shadow root. Depending on where inside the element's subparts the drag is started, the image might be different.
Expected results:
The drag image should be created from the full component.
|
||
Comment 1•5 years ago
|
||
I am attempting to confirm your issue. I have attempted to select each of the test page's drop-down options in Both Nightly v72.0a1 (2019-11-03) and Chrome v78.0.3904.70 but no differences were observed. I am not sure I understand what the issue is. Can you please explain in more detail?
Thank you for your contribution!
Dragging the element in Chrome 78.0.3904.97 (Official Build) (64-bit) on Windows 10
Sorry if I was not clear in my instructions to repeat the issue.
The element has draggable="true" so it is draggable.
You need to try to drag the combo box from either the input/label part, and there should be a drag image visible.
See the screenshot ^ for the Chrome example (78.0.3904.97 (Official Build) (64-bit) Windows 10).
On Firefox 70.0.1 (64-bit) Windows 10 only the "drop not allowed" mouse cursor is shown but NO drag image. (If I take a screenshot nothing is shown)
|
|
||
Comment 4•5 years ago
|
||
I understood the issue and I'm able to confirm the issue in Nightly v72.0a1 from 2019-11-11.
Steps:
- Open https://glitch.com/~messy-morning
- Wait for it to load.
- Drag the "This is the label" label and/or the drop-down box (no selection required).
Actual: Cursor changes in a drag cursor, but the label and box aren't visually dragged.
Expected: Cursor changes in a drag cursor and the label and box ARE visually dragged.
Unfortunately, the provided test page is unreliable (would not open any more). Can somebody provide another one? I'll attempt to regress it if the case.
In the Glitch, which still opens for me, the following resources are used:
package.json
{
"name": "ff-drag-image-shadow-root-issue",
"scripts": {
"start": "bower install && polyserve --port $PORT"
},
"dependencies": {
"polyserve": "^0.27.12",
"bower": "^1.8.4"
}
}
bower.json
{
"name": "ff-drag-image-shadow-root-issue",
"dependencies": {
"polymer": "Polymer/polymer#^2.0.0",
"webcomponentsjs": "webcomponents/webcomponentsjs#^1.0.0",
"vaadin-combo-box": "vaadin/vaadin-combo-box#^4.0.0",
"iron-ajax": "PolymerElements/iron-ajax#^2.0.0"
}
}
index.html
<!DOCTYPE html>
<head>
<script src="bower_components/webcomponentsjs/webcomponents-lite.js"></script>
<link
rel="import"
href="bower_components/vaadin-combo-box/vaadin-combo-box.html"
/>
<link rel="import" href="bower_components/iron-ajax/iron-ajax.html" />
<script>
function dragstart_handler(ev) {
// Add the target element's id to the data transfer object
ev.dataTransfer.setData("text/plain", "");
}
</script>
</head>
<body>
<dom-bind>
<template is="dom-bind">
<iron-ajax
url="https://api.stackexchange.com/2.2/search/advanced?body=vaadin-combo-box&tagged=vaadin&title=[[filter]]&site=stackoverflow"
last-response="{{response}}"
auto
></iron-ajax>
<p>Try to drag and drop the combo box below by pressing and holding down the mouse button on top of the input/label of the element and then moving the mouse.</p>
<p>Expected: The drag image of the whole combo box (label & input) is shown next to the cursor</p>
<p>Actual: On FF, there is no drag image, only the drop not allowed cursor</p>
<vaadin-combo-box
label="This is the label"
draggable="true"
ondragstart="dragstart_handler(event)"
filtered-items="[[response.items]]"
filter="{{filter}}"
item-value-path="question_id"
item-label-path="title"
>
</vaadin-combo-box>
</template>
</dom-bind>
</body>
The playground should be available in https://glitch.com/edit/#!/join/b8b32d66-90cc-4b83-ae93-59bec0b88372
|
|
||
Comment 6•5 years ago
|
||
I one way or another, this issue appears in all main OSes, but a little different (Windows 10, Mac OS 10.15, Ubuntu 18). I do not know if this issue should be addressed separately or with one bug for all, but I have set the platform ad Desktop/All since it does not show the label and box when dragging (like Chrome does). If other bugs are needed for each OS or other testing is required, NI me.
|
||
Updated•5 years ago
|
|
||
Comment 7•5 years ago
|
||
The priority flag is not set for this bug.
:enndeakin, could you have a look please?
For more information, please visit auto_nag documentation.
|
||
Updated•5 years ago
|
I believe this codepen demonstrates the issue. The Glitch link wasn't working for me either.
|
||
Updated•2 years ago
|
Description
•