Fix interactivity of listbox options when combobox is in a dialog (#197)

Co-authored-by: Jose Farias <[email protected]>

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

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
 

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()
+  }
+}

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>

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"

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