turbo_boost-elements 0.0.10 → 0.0.12

data/app/javascript/elements/toggle_elements/target_element/focus.js

@@ -44,10 +44,9 @@ function focusTrixEditorElement (element) {
 }
 
 function shouldEnhanceFocus (element) {
-  return (
-    element.closest('turbo-boost-toggle-target') &&
-    element.tagName.match(/^input|textarea|trix-editor$/i)
-  )
+  if (!element.tagName.match(/^input|textarea|trix-editor$/i)) return false
+  const toggleTargetElement = element.closest('turbo-boost-toggle-target') || {}
+  return !!toggleTargetElement.focusElement
 }
 
 function enhanceFocus (element) {

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

@@ -91,11 +91,8 @@ export default class ToggleTargetElement extends ToggleElement {
     )
   }
 
-  focus () {
-    clearTimeout(this.focusTimeout)
-    this.focusTimeout = setTimeout(() => {
-      if (this.focusElement) this.focusElement.focus()
-    }, 50)
+  applyFocus () {
+    if (this.focusElement) this.focusElement.focus()
   }
 
   get focusSelector () {
@@ -110,12 +107,7 @@ export default class ToggleTargetElement extends ToggleElement {
   }
 
   get triggerElement () {
-    return (
-      document.getElementById(this.labeledBy) ||
-      document.querySelector(
-        `turbo-boost-toggle-trigger[aria-controls="${this.id}"]`
-      )
-    )
+    return document.getElementById(this.labeledBy)
   }
 
   get labeledBy () {

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

@@ -68,9 +68,13 @@ export default class ToggleTriggerElement extends ToggleElement {
     // TODO: implement cache - this.targetElement.renderCachedHTML()
   }
 
+  // runs before an invoke turbo stream is executed
   onBeforeInvoke (event) {
+    // return early if we're not the element responsible for this invoke
     if (event.detail.method !== 'morph') return
     if (event.target.id !== this.morphs) return
+    const selector = `turbo-boost-toggle-target[aria-labeledby="${this.id}"]`
+    if (!event.target.querySelector(selector)) return
 
     // ensure the busy element is shown long enough for a good user experience
     // we accomplish this by modifying the event.detail with invoke instructions i.e. { delay }
@@ -85,13 +89,13 @@ export default class ToggleTriggerElement extends ToggleElement {
       this.busy = false
       this.targetElement.busy = false
       this.morphToggleElements.forEach(el => (el.busy = false))
-      this.expanded = !this.expanded
     }, delay - 10)
 
     // runs after the morph is executed
     setTimeout(() => {
-      if (this.expanded) this.targetElement.focus()
-    }, delay + 10)
+      this.targetElement.setAttribute('aria-labeledby', this.id)
+      this.targetElement.applyFocus()
+    }, delay + 100)
   }
 
   // a list of views shared between the trigger and target

data/lib/turbo_boost/elements/tag_builders/toggle_tags_builder.rb

@@ -22,12 +22,13 @@ class TurboBoost::Elements::TagBuilders::ToggleTagsBuilder < TurboBoost::Element
     focus_selector: nil, # CSS selector for the element to focus when the target is expanded
     method: :toggle, # method to inovke (:show, :hide, :toggle)
     disabled: false, # disable the trigger
+    expanded: false, # override to force expansion
     remember: false, # remember ephemeral UI state between requests
     **kwargs, # generic support for additional element attributes like `class` etc.
     &block # a Ruby block that emits this trigger's content
   )
     kwargs = kwargs.with_indifferent_access
-    kwargs[:id] ||= "#{controls}-toggle-trigger-#{SecureRandom.hex(6)}"
+    kwargs[:id] ||= "#{controls}-toggle-trigger"
 
     # command
     kwargs[:data] ||= {}
@@ -36,7 +37,7 @@ class TurboBoost::Elements::TagBuilders::ToggleTagsBuilder < TurboBoost::Element
     # aria
     kwargs[:aria] ||= {}
     kwargs[:aria][:controls] = controls # toggle target
-    kwargs[:aria][:expanded] = target_expanded?(controls)
+    kwargs[:aria][:expanded] = expanded || target_expanded?(controls)
     kwargs[:aria][:atomic] ||= true
     kwargs[:aria][:relevant] ||= "all"
 
@@ -57,8 +58,8 @@ class TurboBoost::Elements::TagBuilders::ToggleTagsBuilder < TurboBoost::Element
     id, # REQUIRED, the `dom_id` for the element
     collapse_on: [], # list of events that will collapse this target
     collapse_selector: nil, # CSS selector for other matching targets to collapse when this target is expanded
-    expanded: false, # override to force expansion
     focus_selector: nil, # CSS selector for the element to focus when this target is expanded
+    expanded: false, # override to force expansion
     **kwargs, # generic support for additional element attributes like `class` etc.
     &block # a Ruby block that emits this target's content
   )

data/lib/turbo_boost/elements/version.rb

@@ -2,6 +2,6 @@
 
 module TurboBoost
   module Elements
-    VERSION = "0.0.10"
+    VERSION = "0.0.12"
   end
 end

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: turbo_boost-elements
 version: !ruby/object:Gem::Version
-  version: 0.0.10
+  version: 0.0.12
 platform: ruby
 authors:
 - Nate Hopkins (hopsoft)
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2023-01-29 00:00:00.000000000 Z
+date: 2023-02-07 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: rails