Reroute listbox streams to dialog if necessary (#78)

Closes #76
josefarias · Mar 7, 2024 · b73fc75 · b73fc75
1 parent a7e185f
commit b73fc75
Show file tree

Hide file tree

Showing 6 changed files with 27 additions and 10 deletions.
diff --git a/app/assets/javascripts/hw_combobox/models/combobox/dialog.js b/app/assets/javascripts/hw_combobox/models/combobox/dialog.js
@@ -1,6 +1,12 @@
 import Combobox from "hw_combobox/models/combobox/base"
 
 Combobox.Dialog = Base => class extends Base {
+  rerouteListboxStreamToDialog({ detail: { newStream } }) {
+    if (newStream.target == this.listboxTarget.id && this._dialogIsOpen) {
+      newStream.setAttribute("target", this.dialogListboxTarget.id)
+    }
+  }
+
   _connectDialog() {
     if (window.visualViewport) {
       window.visualViewport.addEventListener("resize", this._resizeDialog)
@@ -50,4 +56,8 @@ Combobox.Dialog = Base => class extends Base {
   get _smallViewport() {
     return window.matchMedia(`(max-width: ${this.smallViewportMaxWidthValue})`).matches
   }
+
+  get _dialogIsOpen() {
+    return this.dialogTarget.open
+  }
 }
diff --git a/app/assets/javascripts/hw_combobox/models/combobox/filtering.js b/app/assets/javascripts/hw_combobox/models/combobox/filtering.js
@@ -41,7 +41,7 @@ Combobox.Filtering = Base => class extends Base {
       this._selectNew()
     } else if (isDeleteEvent(event)) {
       this._deselect()
-    } else {
+    } else if (this._isOpen) {
       this._select(this._visibleOptionElements[0])
     }
   }

diff --git a/app/assets/javascripts/hw_combobox/models/combobox/toggle.js b/app/assets/javascripts/hw_combobox/models/combobox/toggle.js
@@ -72,7 +72,7 @@ Combobox.Toggle = Base => class extends Base {
   _collapse() {
     this._actingCombobox.setAttribute("aria-expanded", false) // needs to happen before resetting acting combobox
 
-    if (this.dialogTarget.open) {
+    if (this._dialogIsOpen) {
       this._closeInDialog()
     } else {
       this._closeInline()

diff --git a/app/presenters/hotwire_combobox/component.rb b/app/presenters/hotwire_combobox/component.rb
@@ -232,7 +232,8 @@ def input_data
           input->hw-combobox#filter
           keydown->hw-combobox#navigate
           click@window->hw-combobox#closeOnClickOutside
-          focusin@window->hw-combobox#closeOnFocusOutside".squish,
+          focusin@window->hw-combobox#closeOnFocusOutside
+          turbo:before-stream-render@document->hw-combobox#rerouteListboxStreamToDialog".squish,
         hw_combobox_target: "combobox",
         async_id: canonical_id
     end

diff --git a/test/dummy/app/views/layouts/application.html.erb b/test/dummy/app/views/layouts/application.html.erb
@@ -26,6 +26,12 @@
       .container aside.empty {
         display: none;
       }
+
+      @media (max-width: 600px) {
+        .container aside {
+          display: none;
+        }
+      }
     </style>
   </head>
 

diff --git a/test/system/hotwire_combobox_test.rb b/test/system/hotwire_combobox_test.rb
@@ -458,21 +458,21 @@ class HotwireComboboxTest < ApplicationSystemTestCase
 
   test "dialog" do
     on_small_screen do
-      visit html_options_path
+      visit async_html_path
 
       assert_no_selector "dialog[open]"
-      open_combobox "#state-field"
+      open_combobox "#movie-field"
       assert_selector "dialog[open]"
 
       within "dialog" do
-        type_in_combobox "#state-field-hw-dialog-combobox", "Flor"
-        assert_combobox_display "#state-field-hw-dialog-combobox", "Florida"
-        assert_selected_option_with text: "Florida"
+        type_in_combobox "#movie-field-hw-dialog-combobox", "whi"
+        assert_combobox_display "#movie-field-hw-dialog-combobox", "Whiplash"
+        assert_selected_option_with text: "Whiplash"
       end
-      assert_combobox_value "#state-field", "FL"
+      assert_combobox_value "#movie-field", movies(:whiplash).id
 
       click_away
-      assert_combobox_display_and_value "#state-field", "Florida", "FL"
+      assert_combobox_display_and_value "#movie-field", "Whiplash", movies(:whiplash).id
       assert_no_selector "dialog[open]"
     end
   end