800050 - unable to select text in input[type="text"][draggable]

Status: UNCONFIRMED

(Core :: DOM: Copy & Paste and Drag & Drop, defect)

Description

[flying sheep]

User Agent: Mozilla/5.0 (X11; Linux x86_64; rv:15.0) Gecko/20100101 Firefox/15.0.1
Build ID: 20120907164141

Steps to reproduce:

The attached test case shows that one can’t select text inside a input field that’s (inside of) a draggable element.

all that’s needed to reproduce is this <input type="text" draggable="true"> but the attached test case shows, that it also doesn’t work for input fields inside draggable elements


Actual results:

try to select text in the input fields, nothing happens.


Expected results:

i’d expect it to work as in chrome, where text in draggable input fields is selectable.

1. we have user-select: none
2. we have field.addEventListener('select', function(e) {return false});
3. and most importantly: selecions begun in input fields don’t leave them! there is no danger to accidentally selecting parts outside the draggable element if it happens to be a input field.

Comment 1

[flying sheep]

Attachment: Test case showing both a input field inside a draggable element, and one draggable itself.

Comment 2

[flying sheep]

Attachment: Test case showing both a input field inside a draggable element, and one draggable itself.

meh, why can’t bugzilla identify a html mime type and says text/plain? wtf?

Comment 3

[flying sheep]

Comment on attachment 670046 [details]
Test case showing both a input field inside a draggable element, and one draggable itself.

last try to fix the mime type to text/html

Comment 4

[Loic]

On FF8, I'm able to select the text in the 1st input field, not in the 2nd.
On FF16, I can't in both input fields.

Comment 5

[flying sheep]

most likely firefox 8 doesn’t even recognize the draggable attribute…

Comment 6

[super]

problem persists in FF25.

Comment 7

[u514548]

Working on an app in Firefox 31 and this bug persists.

Comment 8

[Stefan Dehelean]

Problem persists in FF 32.0.3.

Comment 9

[merzhin]

Same Problem on OSX 10.9.5 and firefox 38.0.5 ... so it doesn't seems to be platform specific.

Comment 10

[Josh]

Same issue. Easily reproducible here (3 lines):
https://jsfiddle.net/pmjt0qut/

It's 2016 mozilla. Come on...

Comment 11

[Prafull]

Getting above error on Firefox 54.0.1 too. Is there is any date when this will be resolved?

Comment 12

[evilliger]

Confirmed on FF 54 - using hack described in accepted answer here: https://stackoverflow.com/questions/21680363/prevent-drag-event-to-interfere-with-input-elements-in-firefox-using-html5-drag

Comment 13

[fcheslack]

Still present in 55.0.3 and 56.0b9

Comment 14

[Algorithm Engineer]

This is still present in 65.0.

In my case, I am using Material UI (React). I have a Chip with a label set to a TextField and draggable="true" This works in Chrome.

It seems that there has been interest in a fix for this for years. Please take a look at fix this.

Comment 15

[Jukka Laitinen [:fluks]]

Still present in 73.

Comment 16

[inzeppelin]

Able to reproduce in 76

8 years bug, wow

Comment 17

[[e-mail]]

Reproducible in 84. Please prioritize fixing this bug.

Comment 18

[Masayuki Nakano [:masayuki] (he/him)(JST, +0900)]

The latter case should be handled by bug 739071, but I'm not sure whether the first case (Whether <input draggable="true"> should or should not be worked as an <input> element for mouse operation).

This WPT said that it should not be dragged.
https://searchfox.org/mozilla-central/source/testing/web-platform/tests/html/editing/dnd/interactiveelements/006.html

However, both Chrome and Safari works as same as Gecko (except putting caret position).

smaug: WDYT?

Comment 19

[Frank Forte]

The input itself can only be selectable or draggable, not both. If you add draggable to the input itself, then it is expected to be draggable (no text selection).

The developer would have the option to remove draggable if they want it selectable. For example, let's say I want to time a mouse down event on the input. If it is a long click, then adding "draggable" to the input would allow me to start dragging it around. But on mouse up, I can remove draggable and then select/edit the input text.

As for a draggable parent, if there were three states for the child input, it might be easier:

1. draggable="inherit" would drag both the input and the parent together, assuming the parent (or ancestor) is draggable
2. draggable would drag the input independently, regardless of the parent.
3. (nothing) would let you select text

#2 and #3 are still valid and expected behaviour, even if you can't have #1.

Comment 20

[Reza]

And I am here after 9 years!!! Firefox version 78.8.0esr (64-bit).

Comment 22

[Alfie Brimblecombe]

Just came across this. Applied a workaround to only set draggable to true when needed.

<!doctype html>

<div id="outer" style="touch-action : none;">
    <div id="drag-handle">
        <span>drag me!</span>
    </div>

    <div>
        <input type="text" value="abc">
    </div>
</div>

<script>
    var outerDiv = document.getElementById("outer");
    var dragHandle = document.getElementById("drag-handle");

    dragHandle.onmousedown = e => outerDiv.draggable = true;
    dragHandle.onmouseup = e => outerDiv.draggable = false;
    outerDiv.ondragend = e => outerDiv.draggable = false;
</script>

Comment 23

[ladybenko]

Firefox 1.24.01, still happening. See this JSFiddle https://jsfiddle.net/2sj6r907/

Comment 24

[Bartosz Dziewoński]

This is a duplicate of bug 739071.

Comment 25

[Sean Feng [:sefeng211]]

Masayuki said bug 739071 will take care of the first case, but there's a second case that he wasn't sure. So I'll just leave this open