From 475d129533516cbffefa2db0a79e180db78b0c1c Mon Sep 17 00:00:00 2001
From: Luke Bakken <lrbakken@amazon.com>
Date: Tue, 25 Nov 2025 06:44:04 -0800
Subject: [PATCH] Reorder queue creation form to prevent vhost reset

When creating a queue in the management UI, selecting a non-`/` virtual
host, then a queue type different than the default for that virtual host
causes the vhost selection to reset to `/`. This happens because
changing the queue type calls `update()`, which re-renders the entire
form to display specific data for that virtual host, losing the user's
virtual host selection.

This change reorders the "Add a new queue" form fields so that "Type"
appears before "Virtual host". Users now select the queue type first,
triggering the form re-render before they make their vhost selection.
This prevents the vhost reset without requiring JS wizardry/hacks to
preserve form state across re-renders.

(cherry picked from commit 50b5aae2fe4f55176752ff9830395b36a8a3fc6b)
---
 .../priv/www/js/tmpl/queues.ejs               | 28 +++++++++----------
 1 file changed, 14 insertions(+), 14 deletions(-)

diff --git a/deps/rabbitmq_management/priv/www/js/tmpl/queues.ejs b/deps/rabbitmq_management/priv/www/js/tmpl/queues.ejs
index d1e9d8bca321..d765bb82b6e8 100644
--- a/deps/rabbitmq_management/priv/www/js/tmpl/queues.ejs
+++ b/deps/rabbitmq_management/priv/www/js/tmpl/queues.ejs
@@ -227,20 +227,6 @@
   <div class="hider">
     <form action="#/queues" method="put">
       <table class="form">
-<% if (display.vhosts) { %>
-        <tr>
-          <th><label>Virtual host:</label></th>
-          <td>
-            <select name="vhost">
-              <% for (var i = 0; i < vhosts.length; i++) { %>
-              <option value="<%= fmt_string(vhosts[i].name) %>" <%= (vhosts[i].name === current_vhost) ? 'selected="selected"' : '' %>><%= fmt_string(vhosts[i].name) %></option>
-              <% } %>
-            </select>
-          </td>
-        </tr>
-<% } else { %>
-        <tr><td><input type="hidden" name="vhost" value="<%= fmt_string(vhosts[0].name) %>"/></td></tr>
-<% } %>
         <tr>
           <th><label>Type:</label></th>
           <td>
@@ -258,6 +244,20 @@
             </select>
           </td>
         </tr>
+<% if (display.vhosts) { %>
+        <tr>
+          <th><label>Virtual host:</label></th>
+          <td>
+            <select name="vhost">
+              <% for (var i = 0; i < vhosts.length; i++) { %>
+              <option value="<%= fmt_string(vhosts[i].name) %>" <%= (vhosts[i].name === current_vhost) ? 'selected="selected"' : '' %>><%= fmt_string(vhosts[i].name) %></option>
+              <% } %>
+            </select>
+          </td>
+        </tr>
+<% } else { %>
+        <tr><td><input type="hidden" name="vhost" value="<%= fmt_string(vhosts[0].name) %>"/></td></tr>
+<% } %>
         <tr>
           <th><label>Name:</label></th>
           <td><input type="text" name="name"/><span class="mand">*</span></td>