fix: use focusin/focusout instead of custom events (#1308)

src/routes/_components/timeline/Timeline.html

@@ -1,8 +1,8 @@
 <h1 class="sr-only">{label}</h1>
 <div class="timeline"
      role="feed"
-     on:focusWithCapture="saveFocus(event)"
-     on:blurWithCapture="clearFocus(event)"
+     on:focusin="saveFocus(event)"
+     on:focusout="clearFocus()"
 >
   {#await componentsPromise}
     <!-- awaiting promise -->
@@ -51,7 +51,6 @@
     showMoreItemsForThread,
     showMoreItemsForCurrentTimeline
   } from '../../_actions/timeline'
-  import { focusWithCapture, blurWithCapture } from '../../_utils/events'
   import { scheduleIdleTask } from '../../_utils/scheduleIdleTask'
   import { mark, stop } from '../../_utils/marks'
   import isEqual from 'lodash-es/isEqual'
@@ -141,10 +140,6 @@
       }
     },
     store: () => store,
-    events: {
-      focusWithCapture,
-      blurWithCapture
-    },
     methods: {
       observe,
       initialize () {

src/routes/_utils/events.js

@@ -17,24 +17,6 @@ export function mouseover (node, callback) {
   }
 }
 
-export function focusWithCapture (node, callback) {
-  node.addEventListener('focus', callback, true)
-  return {
-    destroy () {
-      node.removeEventListener('focus', callback, true)
-    }
-  }
-}
-
-export function blurWithCapture (node, callback) {
-  node.addEventListener('blur', callback, true)
-  return {
-    destroy () {
-      node.removeEventListener('blur', callback, true)
-    }
-  }
-}
-
 export function selectionChange (node, callback) {
   let events = ['keyup', 'click', 'focus', 'blur']
   let listener = () => {