Fixes #7188: Re-add missing support for `null_option` on API select

docs/release-notes/version-3.0.md

@@ -8,6 +8,7 @@
 * [#7164](https://github.com/netbox-community/netbox/issues/7164) - Fix styling of "decommissioned" label for circuits
 * [#7169](https://github.com/netbox-community/netbox/issues/7169) - Fix CSV import file upload
 * [#7176](https://github.com/netbox-community/netbox/issues/7176) - Fix issue where query parameters were duplicated across different forms of the same type
+* [#7188](https://github.com/netbox-community/netbox/issues/7188) - Fix issue where select fields with `null_option` did not render or send the null option
 * [#7193](https://github.com/netbox-community/netbox/issues/7193) - Fix prefix (flat) template issue when viewing child prefixes with prefixes available
 
 ---

netbox/project-static/src/select/api/apiSelect.ts

@@ -58,6 +58,12 @@ export class APISelect {
    */
   public readonly emptyOption: Option;
 
+  /**
+   * Null option. When `data-null-option` attribute is a string, the value is used to created an
+   * option of type `{text: '<value from data-null-option>': 'null'}`.
+   */
+  public readonly nullOption: Nullable<Option> = null;
+
   /**
    * Event that will initiate the API call to NetBox to load option data. By default, the trigger
    * is `'load'`, so data will be fetched when the element renders on the page.
@@ -197,6 +203,14 @@ export class APISelect {
       this.emptyOption = EMPTY_PLACEHOLDER;
     }
 
+    const nullOption = base.getAttribute('data-null-option');
+    if (isTruthy(nullOption)) {
+      this.nullOption = {
+        text: nullOption,
+        value: 'null',
+      };
+    }
+
     this.slim = new SlimSelect({
       select: this.base,
       allowDeselect: true,
@@ -291,8 +305,15 @@ export class APISelect {
    */
   private set options(optionsIn: Option[]) {
     let newOptions = optionsIn;
+    // Ensure null option is present, if it exists.
+    if (this.nullOption !== null) {
+      newOptions = [this.nullOption, ...newOptions];
+    }
+    // Sort options unless this element is pre-sorted.
     if (!this.preSorted) {
-      newOptions = optionsIn.sort((a, b) => (a.text.toLowerCase() > b.text.toLowerCase() ? 1 : -1));
+      newOptions = newOptions.sort((a, b) =>
+        a.text.toLowerCase() > b.text.toLowerCase() ? 1 : -1,
+      );
     }
     // Deduplicate options each time they're set.
     const deduplicated = uniqueByProperty(newOptions, 'value');