Merge pull request #14 from github/bestra/file-attachment-dragged-event

Bubble dragover and dragenter events

src/file-attachment-element.ts

@@ -73,6 +73,7 @@ function onDragenter(event: DragEvent) {
   if (dragging) {
     clearTimeout(dragging)
   }
+
   dragging = window.setTimeout(() => target.removeAttribute('hover'), 200)
 
   const transfer = event.dataTransfer
@@ -81,7 +82,6 @@ function onDragenter(event: DragEvent) {
   transfer.dropEffect = 'copy'
   target.setAttribute('hover', '')
 
-  event.stopPropagation()
   event.preventDefault()
 }
 

test/test.js

@@ -142,6 +142,36 @@ describe('file-attachment', function () {
       assert.equal('test.png', event.detail.attachments[0].file.name)
       assert.equal(0, input.files.length)
     })
+
+    it('bubbles the dragenter event after cancelling its default behavior', async function () {
+      const dataTransfer = new DataTransfer()
+      const file = new File(['hubot'], 'test.txt', {type: 'text/plain'})
+      dataTransfer.items.add(file)
+
+      const dragEvent = new DragEvent('dragenter', {bubbles: true, cancelable: true, dataTransfer})
+
+      const listener = once('dragenter')
+      input.dispatchEvent(dragEvent)
+
+      const event = await listener
+      assert.equal(dragEvent, event)
+      assert.equal(true, event.defaultPrevented)
+    })
+
+    it('bubbles the dragover event after cancelling its default behavior', async function () {
+      const dataTransfer = new DataTransfer()
+      const file = new File(['hubot'], 'test.txt', {type: 'text/plain'})
+      dataTransfer.items.add(file)
+
+      const dragEvent = new DragEvent('dragover', {bubbles: true, cancelable: true, dataTransfer})
+
+      const listener = once('dragover')
+      input.dispatchEvent(dragEvent)
+
+      const event = await listener
+      assert.equal(dragEvent, event)
+      assert.equal(true, event.defaultPrevented)
+    })
   })
 })