Delay cleanup after disconnect

app/javascript/elements/toggle_elements/target_element/index.js

@@ -1,5 +1,4 @@
 import ToggleElement from '../toggle_element'
-import './focus'
 
 export default class ToggleTargetElement extends ToggleElement {
   connectedCallback () {
@@ -91,19 +90,8 @@ export default class ToggleTargetElement extends ToggleElement {
     )
   }
 
-  applyFocus () {
-    if (this.focusElement) this.focusElement.focus()
-  }
-
   get focusSelector () {
-    let value = this.getAttribute('focus-selector')
-    if (this.triggerElement)
-      value = this.triggerElement.getAttribute('focus-selector') || value
-    return value
-  }
-
-  get focusElement () {
-    return this.querySelector(this.focusSelector)
+    return this.getAttribute('focus-selector')
   }
 
   get triggerElement () {
@@ -114,6 +102,10 @@ export default class ToggleTargetElement extends ToggleElement {
     return this.getAttribute('aria-labeledby')
   }
 
+  set labeledBy (value) {
+    return this.setAttribute('aria-labeledby', value)
+  }
+
   get collapseOn () {
     const value = this.getAttribute('collapse-on')
     if (!value) return []

app/javascript/elements/toggle_elements/target_element/focus.js → app/javascript/elements/toggle_elements/trigger_element/focus.js

@@ -1,3 +1,5 @@
+let focusTimeout
+
 function deactivateTrixAttributes (editor) {
   const attributes = [
     'bold',
@@ -43,35 +45,26 @@ function focusTrixEditorElement (element) {
   ])
 }
 
-function shouldEnhanceFocus (element) {
-  if (!element.tagName.match(/^input|textarea|trix-editor$/i)) return false
-  const toggleTargetElement = element.closest('turbo-boost-toggle-target') || {}
-  return !!toggleTargetElement.focusElement
-}
+function debouncedFocus (element) {
+  clearTimeout(focusTimeout)
 
-function enhanceFocus (element) {
-  const trixEditorElement = element.closest('trix-editor')
+  focusTimeout = setTimeout(() => {
+    if (!element) return
 
-  try {
-    if (trixEditorElement) {
-      focusTrixEditorElement(trixEditorElement)
-    } else {
-      element.selectionStart = element.selectionEnd = element.value.length
+    element.focus()
+    const trixEditorElement = element.closest('trix-editor')
+
+    try {
+      if (trixEditorElement) {
+        focusTrixEditorElement(trixEditorElement)
+      } else {
+        element.selectionStart = element.selectionEnd = element.value.length
+      }
+    } catch (_) {
+    } finally {
+      element.scrollIntoView({ block: 'center', behavior: 'smooth' })
     }
-  } catch (_) {
-  } finally {
-    setTimeout(
-      () => element.scrollIntoView({ block: 'center', behavior: 'smooth' }),
-      100
-    )
-  }
+  }, 100)
 }
 
-addEventListener(
-  'focus',
-  event => {
-    if (shouldEnhanceFocus(document.activeElement))
-      enhanceFocus(document.activeElement)
-  },
-  true
-)
+export default element => debouncedFocus(element)

app/javascript/elements/toggle_elements/trigger_element/index.js

@@ -1,13 +1,13 @@
 import ToggleElement, { busyDuration } from '../toggle_element'
 import Devtool from './devtool'
+import focus from './focus'
+
+let currentFocusSelector
 
 export default class ToggleTriggerElement extends ToggleElement {
   connectedCallback () {
     super.connectedCallback()
 
-    if (this.targetElement)
-      this.targetElement.setAttribute('aria-labeledby', this.id)
-
     const { start: commandStartEvent } = TurboBoost.Commands.events
     this.commandStartHandler = this.onCommandStart.bind(this)
     this.addEventListener(commandStartEvent, this.commandStartHandler)
@@ -25,15 +25,19 @@ export default class ToggleTriggerElement extends ToggleElement {
   }
 
   disconnectedCallback () {
-    const { start: commandStartEvent } = TurboBoost.Commands.events
-    this.removeEventListener(commandStartEvent, this.commandStartHandler)
+    // delay cleanup because the trigger may have been morphed out of the DOM,
+    // but it's needed to apply behavior like focus etc...
+    setTimeout(() => {
+      const { start: commandStartEvent } = TurboBoost.Commands.events
+      this.removeEventListener(commandStartEvent, this.commandStartHandler)
 
-    const { before: beforeInvokeEvent } = TurboBoost.Streams.invokeEvents
-    removeEventListener(beforeInvokeEvent, this.beforeInvokeHandler)
+      const { before: beforeInvokeEvent } = TurboBoost.Streams.invokeEvents
+      removeEventListener(beforeInvokeEvent, this.beforeInvokeHandler)
 
-    this.devtool.hide({ active: false })
-    this.devtool.unregisterEventListeners()
-    delete this.devtool
+      this.devtool.hide({ active: false })
+      this.devtool.unregisterEventListeners()
+      delete this.devtool
+    }, 1000)
   }
 
   initializeDevtool () {
@@ -61,7 +65,8 @@ export default class ToggleTriggerElement extends ToggleElement {
   }
 
   onCommandStart (event) {
-    this.targetElement.setAttribute('aria-labeledby', this.id)
+    currentFocusSelector = this.focusSelector
+    this.targetElement.labeledBy = this.id
     this.targetElement.collapseMatches()
     this.targetElement.busy = true
     this.busy = true
@@ -92,10 +97,10 @@ export default class ToggleTriggerElement extends ToggleElement {
     }, delay - 10)
 
     // runs after the morph is executed
-    setTimeout(() => {
-      this.targetElement.setAttribute('aria-labeledby', this.id)
-      this.targetElement.applyFocus()
-    }, delay + 100)
+    setTimeout(
+      () => focus(this.targetElement.querySelector(currentFocusSelector)),
+      delay + 100
+    )
   }
 
   // a list of views shared between the trigger and target
@@ -151,8 +156,7 @@ export default class ToggleTriggerElement extends ToggleElement {
 
   get focusSelector () {
     return (
-      this.getAttribute('focus-selector') ||
-      this.targetElement.getAttribute('focus-selector')
+      this.getAttribute('focus-selector') || this.targetElement.focusSelector
     )
   }