Use POST request for creating multiselect chips (#162)

app/assets/javascripts/hw_combobox/models/combobox/multiselect.js

@@ -1,6 +1,6 @@
 import Combobox from "hw_combobox/models/combobox/base"
 import { cancel, nextRepaint } from "hw_combobox/helpers"
-import { get } from "hw_combobox/vendor/requestjs"
+import { post } from "hw_combobox/vendor/requestjs"
 
 Combobox.Multiselect = Base => class extends Base {
   navigateChip(event) {
@@ -79,7 +79,7 @@ Combobox.Multiselect = Base => class extends Base {
   }
 
   async _requestChips(values) {
-    await get(this.selectionChipSrcValue, {
+    await post(this.selectionChipSrcValue, {
       responseKind: "turbo-stream",
       query: {
         for_id: this.element.dataset.asyncId,

app/assets/javascripts/hw_combobox/models/combobox/toggle.js

@@ -16,7 +16,8 @@ Combobox.Toggle = Base => class extends Base {
         this._isSync &&
         !this._isSmallViewport &&
         inputType != "hw:clickOutside" &&
-        inputType != "hw:focusOutside"
+        inputType != "hw:focusOutside" &&
+        inputType != "hw:asyncCloser"
 
       this._lockInSelection()
       this._clearInvalidQuery()

test/dummy/app/controllers/state_chips_controller.rb

@@ -1,18 +1,18 @@
 class StateChipsController < ApplicationController
-  before_action :set_states, except: :new_possibly_new
+  before_action :set_states, except: :create_possibly_new
 
-  def new
+  def create
     render turbo_stream: helpers.combobox_selection_chips_for(@states)
   end
 
-  def new_html
+  def create_html
   end
 
-  def new_dismissing
+  def create_dismissing
     render turbo_stream: helpers.dismissing_combobox_selection_chips_for(@states)
   end
 
-  def new_possibly_new
+  def create_possibly_new
     @states = params[:combobox_values].split(",").map do |value|
       State.find_by(id: value) || OpenStruct.new(to_combobox_display: value, id: value)
     end

test/dummy/app/views/comboboxes/morph.html.erb

@@ -8,6 +8,6 @@
 
 <%= form_with model: @user do |f| %>
   <%= f.combobox :home_state_id, State.all %>
-  <%= f.combobox :visited_state_ids, State.all, multiselect_chip_src: new_state_chip_path %>
+  <%= f.combobox :visited_state_ids, State.all, multiselect_chip_src: state_chips_path %>
   <%= f.submit %>
 <% end %>

test/dummy/app/views/comboboxes/multiselect.html.erb

@@ -1,5 +1,5 @@
 <%= combobox_tag "state", State.all,
       id: "states-field",
       label: "States",
-      multiselect_chip_src: new_state_chip_path,
+      multiselect_chip_src: state_chips_path,
       placeholder: "Select states" %>

test/dummy/app/views/comboboxes/multiselect_async_html.html.erb

@@ -46,6 +46,6 @@
 <%= combobox_tag "state", states_path(page: 0),
       id: "states-field",
       label: "States",
-      multiselect_chip_src: new_html_state_chip_path,
+      multiselect_chip_src: html_state_chips_path,
       value: State.limit(2).ids.join(","),
       placeholder: "Select states" %>

test/dummy/app/views/comboboxes/multiselect_custom_events.html.erb

@@ -32,7 +32,7 @@
     <%= combobox_tag "states", State.all,
           id: "states-field",
           label: "States",
-          multiselect_chip_src: new_state_chip_path,
+          multiselect_chip_src: state_chips_path,
           placeholder: "Select states",
           data: { action: "hw-combobox:preselection->combobox--events#showPreselection hw-combobox:selection->combobox--events#showSelection hw-combobox:removal->combobox--events#showRemoval" } %>
   </div>

test/dummy/app/views/comboboxes/multiselect_dismissing.html.erb

@@ -1,5 +1,11 @@
 <%= combobox_tag "state", State.all,
       id: "states-field",
       label: "States",
-      multiselect_chip_src: new_dismissing_state_chip_path,
+      multiselect_chip_src: dismissing_state_chips_path,
+      placeholder: "Select states" %>
+
+<%= combobox_tag "async_state", states_path,
+      id: "async-states-field",
+      label: "Async States",
+      multiselect_chip_src: dismissing_state_chips_path,
       placeholder: "Select states" %>

test/dummy/app/views/comboboxes/multiselect_new_values.html.erb

@@ -7,7 +7,7 @@
         State.all,
         id: "states-field",
         label: "Visited states (new allowed)",
-        multiselect_chip_src: new_possibly_new_state_chip_path,
+        multiselect_chip_src: possibly_new_state_chips_path,
         name_when_new: "user[visited_states]" %>
   <%= form.submit style: "padding: 0.5rem;" %>
 <% end %>

test/dummy/app/views/comboboxes/multiselect_prefilled_form.html.erb

@@ -3,6 +3,6 @@
 <% end %>
 
 <%= form_with model: @user, html: { style: "display: flex; flex-direction: column; gap: 1rem;" } do |form| %>
-  <%= form.combobox :visited_state_ids, State.all, label: "Visited states", multiselect_chip_src: new_state_chip_path %>
+  <%= form.combobox :visited_state_ids, State.all, label: "Visited states", multiselect_chip_src: state_chips_path %>
   <%= form.submit style: "padding: 0.5rem;" %>
 <% end %>

test/dummy/config/routes.rb

@@ -43,10 +43,10 @@
   post "new_options_form", to: "new_options_forms#create"
 
   resources :states, only: :index
-  resources :state_chips, only: :new, param: :combobox_value
-  get "new_html_state_chip", to: "state_chips#new_html"
-  get "new_dismissing_state_chip", to: "state_chips#new_dismissing"
-  get "new_possibly_new_state_chip", to: "state_chips#new_possibly_new"
+  resources :state_chips, only: :create, param: :combobox_value
+  post "html_state_chips", to: "state_chips#create_html"
+  post "dismissing_state_chips", to: "state_chips#create_dismissing"
+  post "possibly_new_state_chips", to: "state_chips#create_possibly_new"
 
   resources :users, only: :update do
     resources :visits, only: :create

test/system/hotwire_combobox_test.rb

@@ -933,6 +933,7 @@ class HotwireComboboxTest < ApplicationSystemTestCase
     open_combobox "#user_visited_state_ids"
     type_in_combobox "#user_visited_state_ids", "Lou"
     click_on_option "Louisiana"
+    assert_open_combobox
     assert_text "Alabama" # combobox is reset and still open
 
     assert_combobox_display_and_value \
@@ -966,6 +967,24 @@ class HotwireComboboxTest < ApplicationSystemTestCase
       states(:illinois, :louisiana).pluck(:id)
   end
 
+  test "multiselect with dismissing streams" do
+    visit multiselect_dismissing_path
+
+    assert_closed_combobox
+
+    open_combobox "#states-field"
+    type_in_combobox "#states-field", "Lou"
+    click_on_option "Louisiana"
+    sleep 1
+    assert_closed_combobox
+
+    open_combobox "#async-states-field"
+    type_in_combobox "#async-states-field", "Lou"
+    click_on_option "Louisiana"
+    sleep 1
+    assert_closed_combobox
+  end
+
   test "multiselect custom events" do
     visit multiselect_custom_events_path