avo 4.0.23 → 4.0.24

data/app/javascript/js/controllers/popover_menu_controller.js

@@ -1,6 +1,8 @@
 import { Controller } from '@hotwired/stimulus'
 
 export default class extends Controller {
+  static targets = ['searchInput', 'empty']
+
   // Used by both onToggle (auto-focus) and handleKeydown (arrow navigation).
   get focusableItems() {
     return [...this.element.querySelectorAll('a, button')].filter(
@@ -25,9 +27,19 @@ export default class extends Controller {
   onToggle(event) {
     if (event.newState !== 'open') return
 
+    // Each open starts unfiltered — a leftover query from the last visit would
+    // silently hide items.
+    if (this.hasSearchInputTarget) this.resetFilter()
+
     // requestAnimationFrame ensures the popover is fully rendered before we focus.
     // Focusing before the browser paints causes the scroll to jump in some cases.
     requestAnimationFrame(() => {
+      // A searchable menu hands focus to its filter input so the user can just type.
+      if (this.hasSearchInputTarget) {
+        this.searchInputTarget.focus()
+        return
+      }
+
       const items = this.focusableItems
       if (items.length === 0) return
 
@@ -38,24 +50,46 @@ export default class extends Controller {
     })
   }
 
+  // Narrows the rendered items to those whose text matches the query. Items are
+  // queried at call time (not cached) so lazily loaded content — e.g. a
+  // turbo-frame inside the list — is filterable as soon as it arrives. An item
+  // carrying data-filter-text matches on that instead of its full text, so
+  // decorations (timestamps, tags) don't count as matches.
+  filter() {
+    const query = this.searchInputTarget.value.trim().toLowerCase()
+    let anyVisible = false
+
+    this.element.querySelectorAll('.dropdown-menu__list a, .dropdown-menu__list button').forEach((item) => {
+      const text = item.dataset.filterText ?? item.textContent
+      const match = query === '' || text.replace(/\s+/g, ' ').trim().toLowerCase().includes(query)
+      item.hidden = !match
+      if (match) anyVisible = true
+    })
+
+    if (this.hasEmptyTarget) this.emptyTarget.hidden = anyVisible || query === ''
+  }
+
+  resetFilter() {
+    this.searchInputTarget.value = ''
+    this.filter()
+  }
+
   handleKeydown(event) {
     // The keydown listener is always attached, so guard against firing when closed.
     if (!this.element.matches(':popover-open')) return
 
-    const items = this.focusableItems
-    if (items.length === 0) return
-
-    const idx = items.indexOf(document.activeElement)
-
     switch (event.key) {
       case 'ArrowDown':
+      case 'ArrowUp': {
+        const items = this.focusableItems
+        if (items.length === 0) return
+
         event.preventDefault()
-        items[idx < items.length - 1 ? idx + 1 : 0].focus()
-        break
-      case 'ArrowUp':
-        event.preventDefault()
-        items[idx > 0 ? idx - 1 : items.length - 1].focus()
+        const idx = items.indexOf(document.activeElement)
+        if (event.key === 'ArrowDown') items[idx < items.length - 1 ? idx + 1 : 0].focus()
+        else items[idx > 0 ? idx - 1 : items.length - 1].focus()
         break
+      }
       case 'Escape':
         // Close on Escape ourselves. Native popover light-dismiss is unreliable
         // here because other document-level keydown handlers (e.g. the index-row
@@ -63,7 +97,13 @@ export default class extends Controller {
         // also reacting; hidePopover restores focus to the trigger.
         event.preventDefault()
         event.stopPropagation()
-        this.element.hidePopover()
+        // With a non-empty search query the first Escape only clears it; the next closes.
+        if (this.hasSearchInputTarget && this.searchInputTarget.value !== '') {
+          this.resetFilter()
+          this.searchInputTarget.focus()
+        } else {
+          this.element.hidePopover()
+        }
         break
       default:
     }

data/lib/avo/version.rb

@@ -1,3 +1,3 @@
 module Avo
-  VERSION = "4.0.23" unless const_defined?(:VERSION)
+  VERSION = "4.0.24" unless const_defined?(:VERSION)
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: avo
 version: !ruby/object:Gem::Version
-  version: 4.0.23
+  version: 4.0.24
 platform: ruby
 authors:
 - Adrian Marin
@@ -224,6 +224,8 @@ files:
 - app/assets/builds/avo/application.css
 - app/assets/builds/avo/application.js
 - app/assets/builds/avo/application.js.map
+- app/assets/builds/avo/avo.custom.js
+- app/assets/builds/avo/avo.custom.js.map
 - app/assets/builds/avo/dependencies.css
 - app/assets/builds/avo/late-registration.js
 - app/assets/builds/avo/late-registration.js.map