File API drag and drop does not work in contenteditable
OS: macOS 14.0 · Device: Desktop or Laptop MacBook Pro · Browser: Safari 17.0 · Keyboard: US
Open case →Scenario
File API drag and drop does not work in contenteditable
When trying to drag and drop files into a contenteditable element, the File API may not work as expected. File drop events may not fire, or file content may not be accessible.
other
Scenario ID
scenario-file-api
Details
When trying to drag and drop files into a contenteditable element, the File API may not work as expected. File drop events may not fire, or file content may not be accessible.
References
- WebKit Bug 57185: drop event not fired for contenteditable - Drop event issues
- WebKit Mailing List: DataTransfer items empty during dragover - File type detection issues
- Apple Developer: Safari drag and drop - Safari behavior
- MDN: File drag and drop - File drag and drop guide
- Stack Overflow: Drag and drop event in contenteditable - Event handling
Scenario flow
Visual view of how this scenario connects to its concrete cases and environments. Nodes can be dragged and clicked.
Variants
Each row is a concrete case for this scenario, with a dedicated document and playground.
| Case | OS | Device | Browser | Keyboard | Status |
|---|---|---|---|---|---|
| ce-0085-contenteditable-with-file-api | macOS 14.0 | Desktop or Laptop MacBook Pro | Safari 17.0 | US | draft |
Cases
Open a case to see the detailed description and its dedicated playground.
Related Scenarios
Other scenarios that share similar tags or category.
Tags: safari, macos
CORS restrictions may affect contenteditable in cross-origin iframes
When a contenteditable element is inside a cross-origin iframe, CORS restrictions may prevent certain operations. Accessing the contenteditable from the parent frame may be blocked, and some editing operations may be restricted.
1 case
Tags: safari, macos
CSS isolation property may affect contenteditable stacking context
When a contenteditable element has the CSS isolation: isolate property, it creates a new stacking context. This may affect how selection handles and IME candidate windows are positioned relative to the element.
1 case
Tags: safari, macos
IntersectionObserver may affect contenteditable visibility detection
When an IntersectionObserver is used to detect when a contenteditable element becomes visible or hidden, the observer may not fire correctly during editing. Changes to content size or position during editing may not trigger intersection updates as expected.
1 case
Tags: safari, macos
MutationObserver may interfere with contenteditable editing
When a MutationObserver is attached to a contenteditable element or its parent, the observer callbacks may interfere with editing performance. Frequent DOM mutations during typing can trigger many observer callbacks, causing lag or jank.
1 case
Tags: safari, macos
Page Visibility API may affect contenteditable during tab switches
When a page with a contenteditable element becomes hidden (tab switch, minimize), the Page Visibility API may affect editing state. Focus may be lost, and composition may be interrupted.
1 case
Comments & Discussion
Have questions, suggestions, or want to share your experience? Join the discussion below.