From 79302f829372b7dfc1466397689f01062e7ec66f Mon Sep 17 00:00:00 2001
From: Josh Brown <josh@joossh.com>
Date: Sat, 31 Aug 2024 19:22:13 +0100
Subject: [PATCH] Fix interactivity of listbox options when combobox is in a
 dialog (#197)

Co-authored-by: Jose Farias <jose@farias.mx>
---
 .../hotwire_combobox/listbox/option.rb           |  1 +
 .../app/controllers/comboboxes_controller.rb     |  3 +++
 .../javascript/controllers/dialog_controller.js  |  9 +++++++++
 test/dummy/app/views/comboboxes/dialog.html.erb  | 16 ++++++++++++++++
 test/dummy/config/routes.rb                      |  1 +
 test/system/hotwire_combobox_test.rb             | 10 ++++++++++
 6 files changed, 40 insertions(+)
 create mode 100644 test/dummy/app/javascript/controllers/dialog_controller.js
 create mode 100644 test/dummy/app/views/comboboxes/dialog.html.erb

diff --git a/app/presenters/hotwire_combobox/listbox/option.rb b/app/presenters/hotwire_combobox/listbox/option.rb
index 2a5b77e..ca76b4c 100644
--- a/app/presenters/hotwire_combobox/listbox/option.rb
+++ b/app/presenters/hotwire_combobox/listbox/option.rb
@@ -26,6 +26,7 @@ def options
       {
         id: id,
         role: :option,
+        tabindex: "-1",
         class: [ "hw-combobox__option", { "hw-combobox__option--blank": blank? } ],
         data: data,
         aria: aria
diff --git a/test/dummy/app/controllers/comboboxes_controller.rb b/test/dummy/app/controllers/comboboxes_controller.rb
index 7a75600..673c54d 100644
--- a/test/dummy/app/controllers/comboboxes_controller.rb
+++ b/test/dummy/app/controllers/comboboxes_controller.rb
@@ -109,6 +109,9 @@ def external_clear
     @user = User.first || raise("No user found, load fixtures first.")
   end
 
+  def dialog
+  end
+
   private
     delegate :combobox_options, :html_combobox_options, to: "ApplicationController.helpers", private: true
 
diff --git a/test/dummy/app/javascript/controllers/dialog_controller.js b/test/dummy/app/javascript/controllers/dialog_controller.js
new file mode 100644
index 0000000..1949a11
--- /dev/null
+++ b/test/dummy/app/javascript/controllers/dialog_controller.js
@@ -0,0 +1,9 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  static targets = [ "dialog" ]
+
+  open() {
+    this.dialogTarget.showModal()
+  }
+}
diff --git a/test/dummy/app/views/comboboxes/dialog.html.erb b/test/dummy/app/views/comboboxes/dialog.html.erb
new file mode 100644
index 0000000..ddd673b
--- /dev/null
+++ b/test/dummy/app/views/comboboxes/dialog.html.erb
@@ -0,0 +1,16 @@
+<%= tag.style nonce: content_security_policy_nonce do %>
+  dialog {
+    height: 80vh;
+    width: 80vw;
+  }
+<% end %>
+
+<article data-controller="dialog">
+  <dialog data-dialog-target="dialog">
+    <%= form_with model: Movie.new do |form| %>
+      <%= form.combobox :rating, Movie.ratings %>
+    <% end %>
+  </dialog>
+
+  <button data-action="dialog#open">Show modal</button>
+</article>
diff --git a/test/dummy/config/routes.rb b/test/dummy/config/routes.rb
index dfec8e1..1eba10c 100644
--- a/test/dummy/config/routes.rb
+++ b/test/dummy/config/routes.rb
@@ -32,6 +32,7 @@
   get "morph", to: "comboboxes#morph"
   get "form_object", to: "comboboxes#form_object"
   get "external_clear", to: "comboboxes#external_clear"
+  get "dialog", to: "comboboxes#dialog"
 
   resources :movies, only: %i[ index update ]
   get "movies_html", to: "movies#index_html"
diff --git a/test/system/hotwire_combobox_test.rb b/test/system/hotwire_combobox_test.rb
index 64c9c0a..4201163 100644
--- a/test/system/hotwire_combobox_test.rb
+++ b/test/system/hotwire_combobox_test.rb
@@ -1332,6 +1332,16 @@ class HotwireComboboxTest < ApplicationSystemTestCase
     page.evaluate_script("document.activeElement.id") == "external_clear"
   end
 
+  test "selecting options within a dialog" do
+    visit dialog_path
+
+    click_on "Show modal"
+
+    open_combobox "#movie_rating"
+    click_on_option "R"
+    assert_combobox_display_and_value "#movie_rating", "R", Movie.ratings[:R]
+  end
+
   private
     def open_combobox(selector)
       find(selector).click