Fixes #7823: Properly handle return_url when Save & Continue button is present

Author: thatmattlove

docs/release-notes/version-3.0.md

@@ -5,6 +5,7 @@
 ### Enhancements
 
 * [#7751](https://github.com/netbox-community/netbox/issues/7751) - Get API user from LDAP only when `FIND_GROUP_PERMS` is enabled
+* [#7823](https://github.com/netbox-community/netbox/issues/7823) - Fix issue where `return_url` is not honored when 'Save & Continue' button is present
 * [#7885](https://github.com/netbox-community/netbox/issues/7885) - Linkify VLAN name in VLANs table
 * [#7892](https://github.com/netbox-community/netbox/issues/7892) - Add L22-30 power port & outlet types
 * [#7932](https://github.com/netbox-community/netbox/issues/7932) - Improve performance of the "quick find" function

netbox/project-static/dist/netbox.js

@@ -1,4 +1,32 @@
-import { getElements, scrollTo } from '../util';
+import { getElements, scrollTo, isTruthy } from '../util';
+
+/**
+ * When editing an object, it is sometimes desirable to customize the form action *without*
+ * overriding the form's `submit` event. For example, the 'Save & Continue' button. We don't want
+ * to use the `formaction` attribute on that element because it will be included on the form even
+ * if the button isn't clicked.
+ *
+ * @example
+ * ```html
+ * <button type="button" return-url="/special-url/">
+ *   Save & Continue
+ * </button>
+ * ```
+ *
+ * @param event Click event.
+ */
+function handleSubmitWithReturnUrl(event: MouseEvent): void {
+  const element = event.target as HTMLElement;
+  if (element.tagName === 'BUTTON') {
+    const button = element as HTMLButtonElement;
+    const action = button.getAttribute('return-url');
+    const form = button.form;
+    if (form !== null && isTruthy(action)) {
+      form.action = action;
+      form.submit();
+    }
+  }
+}
 
 function handleFormSubmit(event: Event, form: HTMLFormElement): void {
   // Track the names of each invalid field.
@@ -38,6 +66,15 @@ function handleFormSubmit(event: Event, form: HTMLFormElement): void {
   }
 }
 
+/**
+ * Attach event listeners to form buttons with the `return-url` attribute present.
+ */
+function initReturnUrlSubmitButtons(): void {
+  for (const button of getElements<HTMLButtonElement>('button[return-url]')) {
+    button.addEventListener('click', handleSubmitWithReturnUrl);
+  }
+}
+
 /**
  * Attach an event listener to each form's submitter (button[type=submit]). When called, the
  * callback checks the validity of each form field and adds the appropriate Bootstrap CSS class
@@ -54,4 +91,5 @@ export function initFormElements(): void {
       submitter.addEventListener('click', (event: Event) => handleFormSubmit(event, form));
     }
   }
+  initReturnUrlSubmitButtons();
 }

netbox/project-static/dist/netbox.js.map

@@ -51,7 +51,7 @@ <h5 class="offset-sm-3">Custom Fields</h5>
 {% block buttons %}
     <a href="{{ return_url }}" class="btn btn-outline-danger">Cancel</a>
     {% if obj.pk %}
-        <button type="submit" formaction="?return_url={% url 'dcim:interface_edit' pk=obj.pk %}" class="btn btn-outline-primary">Save & Continue Editing</button>
+        <button type="button" return-url="?return_url={% url 'dcim:interface_edit' pk=obj.pk %}" class="btn btn-outline-primary">Save & Continue Editing</button>
         <button type="submit" name="_update" class="btn btn-primary">Save</button>
     {% else %}
         <button type="submit" name="_addanother" class="btn btn-outline-primary">Create & Add Another</button>

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

@@ -46,7 +46,7 @@ <h5 class="offset-sm-3">Custom Fields</h5>
 {% block buttons %}
   <a href="{{ return_url }}" class="btn btn-outline-danger">Cancel</a>
   {% if obj.pk %}
-    <button type="submit" formaction="?return_url={% url 'virtualization:vminterface_edit' pk=obj.pk %}" class="btn btn-outline-primary">Save & Continue Editing</button>
+    <button type="button" return-url="?return_url={% url 'virtualization:vminterface_edit' pk=obj.pk %}" class="btn btn-outline-primary">Save & Continue Editing</button>
     <button type="submit" name="_update" class="btn btn-primary">Save</button>
   {% else %}
     <button type="submit" name="_addanother" class="btn btn-outline-primary">Create & Add Another</button>