Automatic slug generation doesn't work in quick-add modals

[jnovinger]

NetBox Edition

NetBox Community

NetBox Version

v4.4.2

Python Version

3.12

Steps to Reproduce

1. Navigate to any form that has a quick-add button for a model with a slug field (e.g., Prefix form -> Role field quick-add)
2. Click the "+" button to open the quick-add modal for creating a new Role
3. Enter a name in the Name field
4. Tab out of the Name field or click the slug button
5. Observe the Slug field

Root Cause

The slug generation JavaScript in project-static/src/buttons/reslug.ts looks for fields using hard-coded ID selectors:

const slugField = form.querySelector('#id_slug') as HTMLInputElement;
const sourceField = form.querySelector(`#id_${sourceId}`) as HTMLInputElement;

In quick-add modals, form fields are prefixed with quickadd-, so the actual IDs are id_quickadd-slug and id_quickadd-${sourceId}. The JavaScript cannot find these prefixed field IDs, so the slug generation functionality fails silently.

Related Issues

This bug was discovered while fixing #20542, which addressed a similar issue where the form prefix wasn't being applied consistently in quick-add modals.

Expected Behavior

The slug field should be automatically populated based on the name field, either when tabbing out of the name field or when clicking the slug generation button. This is the standard behavior when using the same form outside of the quick-add modal context.

Observed Behavior

The slug field remains empty. Automatic slug generation does not function in quick-add modals.