Fixes #23329: Keep object selector search inside its modal (#23389)

Apply filter modifiers to outgoing HTMX requests instead of navigating
the parent page, preserving unsaved form input.

Skip URL state restoration only for object selectors and recognize both
hx-get and data-hx-get. Move the shared htmx:configRequest event type to
global.d.ts.

netbox/project-static/src/buttons/markdownPreview.ts

@@ -1,15 +1,3 @@
-/**
- * interface for htmx configRequest event
- */
-declare global {
-  interface HTMLElementEventMap {
-    'htmx:configRequest': CustomEvent<{
-      parameters: Record<string, string>;
-      headers: Record<string, string>;
-    }>;
-  }
-}
-
 function initMarkdownPreview(markdownWidget: HTMLDivElement) {
   const previewButton = markdownWidget.querySelector('button.preview-button') as HTMLButtonElement;
   const textarea = markdownWidget.querySelector('textarea') as HTMLTextAreaElement;

netbox/project-static/src/forms/filterModifiers.ts

@@ -16,13 +16,27 @@ export function initFilterModifiers(): void {
     const modifierSelects = form.querySelectorAll<HTMLSelectElement>('.modifier-select');
     if (modifierSelects.length === 0) continue;
 
-    initializeFromURL(form);
+    // HTMX-driven forms submit via XHR; navigating away would discard the page the form lives in
+    const isHtmxForm = form.hasAttribute('hx-get') || form.hasAttribute('data-hx-get');
+
+    // The object selector lives in a modal, so the page URL doesn't reflect its state
+    if (!form.hasAttribute('data-object-selector')) {
+      initializeFromURL(form);
+    }
 
     modifierSelects.forEach(select => {
       select.addEventListener('change', () => handleModifierChange(select));
       handleModifierChange(select);
     });
 
+    if (isHtmxForm) {
+      // Rewrite field names on the outgoing HTMX request instead of navigating
+      form.addEventListener('htmx:configRequest', e => {
+        handleFormDataTransform(form, e.detail.formData);
+      });
+      continue;
+    }
+
     // Must use submit event for GET forms
     form.addEventListener('submit', e => {
       e.preventDefault();

netbox/project-static/src/global.d.ts

@@ -82,3 +82,14 @@ type ColorModePreference = ColorMode | 'none';
 type ColorModeData = {
   netboxColorMode: ColorMode;
 };
+
+/**
+ * interface for htmx configRequest event
+ */
+interface HTMLElementEventMap {
+  'htmx:configRequest': CustomEvent<{
+    parameters: Record<string, string>;
+    formData: FormData;
+    headers: Record<string, string>;
+  }>;
+}

netbox/templates/htmx/object_selector.html

@@ -17,7 +17,7 @@
     </div>
   </div>
   <div class="col-9">
-    <form hx-get="{% url 'htmx_object_selector' %}?_model={{ model|meta:"label_lower" }}" hx-target="#selector_results" hx-trigger="load, submit, change, keyup from:#id_q delay:500ms">
+    <form data-object-selector hx-get="{% url 'htmx_object_selector' %}?_model={{ model|meta:"label_lower" }}" hx-target="#selector_results" hx-trigger="load, submit, change, keyup from:#id_q delay:500ms">
       <input type="hidden" name="_search" value="true" />
       <div class="tab-content p-1">
         {% for field in form.visible_fields %}