Choosing a sort by option automatically sends the sort_by url parameter

app/controllers/profiles_controller.rb

@@ -8,14 +8,14 @@ class ProfilesController < ApplicationController
   before_action :disable_cache, only: :edit
 
   def show
-    @user = User.find_by_slug!(params[:id])
-    rubygems = @user.rubygems
-    @rubygems = case params[:sort_by]
-                when "name"
-                  rubygems.reorder(:name)
-                else
-                  rubygems.by_downloads
-                end
+    @user           = User.find_by_slug!(params[:id])
+    rubygems        = @user.rubygems
+    @rubygems       = case params[:sort_by]
+                      when "name"
+                        rubygems.reorder(:name)
+                      else
+                        rubygems.by_downloads
+                      end
   end
 
   def me

app/javascript/controllers/gem_sort_controller.js

@@ -0,0 +1,13 @@
+import { Controller } from "@hotwired/stimulus"
+
+// Connects to data-controller="gem-sort"
+export default class extends Controller {
+  static targets = ["form", "select"]
+  connect() {
+    this.selectTarget.onchange = () => this.formSubmit();
+  }
+
+  formSubmit = () => {
+    this.formTarget.submit();
+  }
+}

app/views/profiles/_sort_form.html.erb

@@ -1,7 +1,25 @@
 <div class="sorting">
-  <%= form_with url: profile_path(@user&.handle), method: :get do |f| %>
+  <%=
+    form_with(
+      data: {
+        "controller": "gem-sort",
+        "gem-sort-target": "form",
+      },
+      method: :get,
+      url: profile_path(@user&.handle)
+    ) do |f|
+  %>
     <%= f.label :sort_by, class: "t-text--s"%>
-    <%= f.select :sort_by, options_for_select([["Name", "name"], ["Downloads", "downloads"]]) %>
-    <%= f.submit "Sort" %>
+    <%=
+      select_tag :sort_by,
+                 options_for_select(
+                   [
+                     ["Name", "name"],
+                     ["Downloads", "downloads"]
+                   ],
+                   params[:sort_by] || "downloads"
+                 ),
+                 data: { "gem-sort-target" => "select" }
+    %>
   <% end %>
 </div>