facebookarchive/draft-js

Mouse dragging all text into non-Draft input throws lots of errors

Open

#1240 opened on Jun 8, 2017

View on GitHub
 (6 comments) (0 reactions) (0 assignees)JavaScript (22,554 stars) (2,646 forks)batch import
bughelp wanted

Description

Do you want to request a feature or report a bug?

Bug

What is the current behavior?

If you click and drag all of the text in a DraftJS editor with your mouse out of a DraftJS editor into a non-DraftJS input, it starts throwing a bunch of errors when typing in the DraftJS editor.

Does not happen if you don't select all of the text or if you pull the text into another DraftJS editor.

draftjsbug

https://jsfiddle.net/ew2gfqqj/

What is the expected behavior?

No errors on mouse drag in Chrome. No weird text behavior on IE11.

I also would expect the text being dragged to populate in the other input - it currently does not appear in Chrome, even with partial instead of full text selection (see GIF above).

Which versions of Draft.js, and which browser / OS are affected by this issue? Did this work in previous versions of Draft.js?

I've tried on 0.9.1 on OS X Chrome and Windows IE 11 and Chrome, as well as 0.10.1 on OS X Chrome and Windows 7 IE 11 and Chrome.

It seems to throw errors in Chrome and lead to weird disappearing / reappearing text behavior in IE11.

Contributor guide

Tech stack
javascriptreact
Domain
frontend
Issue type
bug
DifficultyEstimated implementation difficulty for a new contributor, from 1 for very small changes to 5 for expert-level work.
3
Estimated timeA rough time range for an experienced contributor to investigate, implement, test, and prepare a pull request.
1-2 days
Activity statusHow available the issue appears right now: fresh, active, stale, blocked, or waiting on maintainer input.
stale
ClarityHow clearly the issue explains the expected change, acceptance criteria, and next step.
clear
Prerequisites
Draft.js basicsReactbrowser event handlingChrome debugging
Newbie friendlinessA 1-100 score estimating how approachable this issue is for first-time contributors.
30
Research direction
Investigate the DraftEditor component's event handling for drag and drop, particularly the onDragStart and onDrop methods. The bug occurs when dragging all text out of the editor into a non Draft input. Focus on the selection state and how it interacts with the HTML5 drag and drop API. Check the repository's archived status; contributions may not be merged. Look at the provided JSFiddle to reproduce the issue. Consider whether the fix involves preventing default behavior on drag start or cleaning up editor state after the drop occurs elsewhere.