fix: keep drag hover timers per element

src/file-attachment-element.ts

@@ -63,18 +63,18 @@ function hasFile(transfer: DataTransfer): boolean {
   return Array.from(transfer.types).indexOf('Files') >= 0
 }
 
-let dragging: number | null = null
+const dragging = new WeakMap<Element, number>()
 
 // Highlight textarea and change drop cursor. Ensure drop target styles
 // are cleared after dragging back outside of window.
 function onDragenter(event: DragEvent) {
   const target = event.currentTarget as Element
 
-  if (dragging) {
-    clearTimeout(dragging)
-  }
-
-  dragging = window.setTimeout(() => target.removeAttribute('hover'), 200)
+  clearTimeout(dragging.get(target))
+  dragging.set(
+    target,
+    window.setTimeout(() => target.removeAttribute('hover'), 200)
+  )
 
   const transfer = event.dataTransfer
   if (!transfer || !hasFile(transfer)) return

test/test.js

@@ -91,6 +91,22 @@ describe('file-attachment', function () {
       document.body.innerHTML = ''
     })
 
+    it('clears hover independently for multiple attachment elements', async function () {
+      const other = document.createElement('file-attachment')
+      document.body.append(other)
+      const dataTransfer = new DataTransfer()
+      dataTransfer.items.add(new File(['hubot'], 'test.txt', {type: 'text/plain'}))
+      fileAttachment.dispatchEvent(new DragEvent('dragenter', {bubbles: true, dataTransfer}))
+      other.dispatchEvent(new DragEvent('dragenter', {bubbles: true, dataTransfer}))
+      assert.isTrue(fileAttachment.hasAttribute('hover'))
+      assert.isTrue(other.hasAttribute('hover'))
+
+      await new Promise(resolve => window.setTimeout(resolve, 250))
+
+      assert.isFalse(fileAttachment.hasAttribute('hover'))
+      assert.isFalse(other.hasAttribute('hover'))
+    })
+
     it('attaches files via .attach', async function () {
       const listener = once('file-attachment-accepted')