Reconnect after element morph

app/assets/javascripts/controllers/hw_combobox_controller.js

@@ -65,6 +65,10 @@ export default class HwComboboxController extends Concerns(...concerns) {
   }
 
   connect() {
+    this.idempotentConnect()
+  }
+
+  idempotentConnect() {
     this._connectSelection()
     this._connectListAutocomplete()
     this._connectDialog()

app/presenters/hotwire_combobox/component.rb

@@ -329,7 +329,8 @@ def input_data
           click@window->hw-combobox#closeOnClickOutside
           focusin@window->hw-combobox#closeOnFocusOutside
           turbo:before-stream-render@document->hw-combobox#rerouteListboxStreamToDialog
-          turbo:before-cache@document->hw-combobox#hideChipsForCache".squish,
+          turbo:before-cache@document->hw-combobox#hideChipsForCache
+          turbo:morph-element->hw-combobox#idempotentConnect".squish,
         hw_combobox_target: "combobox",
         async_id: canonical_id
     end

test/dummy/app/controllers/comboboxes_controller.rb

@@ -93,6 +93,10 @@ def multiselect_new_values
   def grouped_options
   end
 
+  def morph
+    @user = User.where.not(home_state: nil).first || raise("No user found with home state, load fixtures first.")
+  end
+
   private
     delegate :combobox_options, :html_combobox_options, to: "ApplicationController.helpers", private: true
 

test/dummy/app/controllers/users_controller.rb

@@ -25,6 +25,6 @@ def user_params
     end
 
     def visited_state_ids
-      params[:user][:visited_state_ids].split(",")
+      params[:user][:visited_state_ids]&.split(",") || []
     end
 end

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

@@ -0,0 +1,12 @@
+<%= content_for :head do %>
+  <meta name="turbo-refresh-method" content="morph">
+<% end %>
+
+<% if flash[:notice] %>
+  <p><%= flash[:notice] %></p>
+<% end %>
+
+<%= form_with model: @user do |f| %>
+  <%= f.combobox :home_state_id, State.all %>
+  <%= f.submit %>
+<% end %>

test/dummy/app/views/layouts/application.html.erb

@@ -10,6 +10,8 @@
     <%= combobox_style_tag %>
     <%= javascript_importmap_tags %>
 
+    <%= yield :head %>
+
     <style>
       @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap');
 

test/dummy/config/routes.rb

@@ -28,6 +28,7 @@
   get "multiselect_custom_events", to: "comboboxes#multiselect_custom_events"
   get "multiselect_new_values", to: "comboboxes#multiselect_new_values"
   get "grouped_options", to: "comboboxes#grouped_options"
+  get "morph", to: "comboboxes#morph"
 
   resources :movies, only: %i[ index update ]
   get "movies_html", to: "movies#index_html"

test/system/hotwire_combobox_test.rb

@@ -1116,6 +1116,25 @@ class HotwireComboboxTest < ApplicationSystemTestCase
     assert_selected_option_with text: "Alabama"
   end
 
+  test "preselected morph" do
+    visit morph_path
+
+    user = User.where.not(home_state: nil).first
+    new_state = State.all.without(user.home_state).first
+
+    assert_combobox_display_and_value "#user_home_state_id", user.home_state.name, user.home_state.id
+
+    open_combobox "#user_home_state_id"
+    click_on_option new_state.name
+    assert_combobox_display_and_value "#user_home_state_id", new_state.name, new_state.id
+
+    find("input[type=submit]").click
+
+    assert_text "User updated"
+
+    assert_combobox_display_and_value "#user_home_state_id", new_state.name, new_state.id
+  end
+
   private
     def open_combobox(selector)
       find(selector).click