#2311: New ComboBox widget for form fields [BOB]

src/registrar/assets/src/js/getgov/main.js

@@ -3,7 +3,6 @@ import { initDomainValidators } from './domain-validators.js';
 import { initFormsetsForms, triggerModalOnDsDataForm, nameserversFormListener } from './formset-forms.js';
 import { initializeUrbanizationToggle } from './urbanization.js';
 import { userProfileListener, finishUserSetupListener } from './user-profile.js';
-import { loadInitialValuesForComboBoxes } from './combobox.js';
 import { handleRequestingEntityFieldset } from './requesting-entity.js';
 import { initDomainsTable } from './table-domains.js';
 import { initDomainRequestsTable } from './table-domain-requests.js';
@@ -31,8 +30,6 @@ initializeUrbanizationToggle();
 userProfileListener();
 finishUserSetupListener();
 
-loadInitialValuesForComboBoxes();
-
 handleRequestingEntityFieldset();
 
 initDomainsTable();

src/registrar/assets/src/js/getgov/requesting-entity.js

@@ -9,15 +9,16 @@ export function handleRequestingEntityFieldset() {
     const formPrefix = "portfolio_requesting_entity";
     const radioFieldset = document.getElementById(`id_${formPrefix}-requesting_entity_is_suborganization__fieldset`);
     const radios = radioFieldset?.querySelectorAll(`input[name="${formPrefix}-requesting_entity_is_suborganization"]`);
-    const select = document.getElementById(`id_${formPrefix}-sub_organization`);
-    const selectParent = select?.parentElement;
+    const input = document.getElementById(`id_${formPrefix}-sub_organization`);
+    const inputGrandParent = input?.parentElement?.parentElement;
+    const select = input?.previousElementSibling;
     const suborgContainer = document.getElementById("suborganization-container");
     const suborgDetailsContainer = document.getElementById("suborganization-container__details");
     const suborgAddtlInstruction = document.getElementById("suborganization-addtl-instruction");
     const subOrgCreateNewOption = document.getElementById("option-to-add-suborg")?.value;
     // Make sure all crucial page elements exist before proceeding.
     // This more or less ensures that we are on the Requesting Entity page, and not elsewhere.
-    if (!radios || !select || !selectParent || !suborgContainer || !suborgDetailsContainer) return;
+    if (!radios || !input || !select || !inputGrandParent || !suborgContainer || !suborgDetailsContainer) return;
 
     // requestingSuborganization: This just broadly determines if they're requesting a suborg at all
     // requestingNewSuborganization: This variable determines if the user is trying to *create* a new suborganization or not.
@@ -28,7 +29,7 @@ export function handleRequestingEntityFieldset() {
         if (radio != null) requestingSuborganization = radio?.checked && radio.value === "True";
         requestingSuborganization ? showElement(suborgContainer) : hideElement(suborgContainer);
         if (select.options.length == 2) { // --Select-- and other are the only options
-            hideElement(selectParent); // Hide the select drop down and indicate requesting new suborg
+            hideElement(inputGrandParent); // Hide the combo box and indicate requesting new suborg
             hideElement(suborgAddtlInstruction); // Hide additional instruction related to the list
             requestingNewSuborganization.value = "True";
         } else {
@@ -37,11 +38,6 @@ export function handleRequestingEntityFieldset() {
         requestingNewSuborganization.value === "True" ? showElement(suborgDetailsContainer) : hideElement(suborgDetailsContainer);
     }
 
-    // Add fake "other" option to sub_organization select
-    if (select && !Array.from(select.options).some(option => option.value === "other")) {
-        select.add(new Option(subOrgCreateNewOption, "other"));
-    }
-
     if (requestingNewSuborganization.value === "True") {
         select.value = "other";
     }

src/registrar/forms/domain.py

@@ -4,6 +4,7 @@
 from django import forms
 from django.core.validators import MinValueValidator, MaxValueValidator, RegexValidator, MaxLengthValidator
 from django.forms import formset_factory
+from registrar.forms.utility.combobox import ComboboxWidget
 from registrar.models import DomainRequest, FederalAgency
 from phonenumber_field.widgets import RegionalPhoneNumberWidget
 from registrar.models.suborganization import Suborganization
@@ -161,9 +162,11 @@ class DomainSuborganizationForm(forms.ModelForm):
     """Form for updating the suborganization"""
 
     sub_organization = forms.ModelChoiceField(
+        label="Suborganization name",
         queryset=Suborganization.objects.none(),
+        empty_label="⎯ (No suborganization)",
         required=False,
-        widget=forms.Select(),
+        widget=ComboboxWidget,
     )
 
     class Meta:
@@ -178,20 +181,6 @@ def __init__(self, *args, **kwargs):
         portfolio = self.instance.portfolio if self.instance else None
         self.fields["sub_organization"].queryset = Suborganization.objects.filter(portfolio=portfolio)
 
-        # Set initial value
-        if self.instance and self.instance.sub_organization:
-            self.fields["sub_organization"].initial = self.instance.sub_organization
-
-        # Set custom form label
-        self.fields["sub_organization"].label = "Suborganization name"
-
-        # Use the combobox rather than the regular select widget
-        self.fields["sub_organization"].widget.template_name = "django/forms/widgets/combobox.html"
-
-        # Set data-default-value attribute
-        if self.instance and self.instance.sub_organization:
-            self.fields["sub_organization"].widget.attrs["data-default-value"] = self.instance.sub_organization.pk
-
 
 class BaseNameserverFormset(forms.BaseFormSet):
     def clean(self):
@@ -456,6 +445,14 @@ class DomainSecurityEmailForm(forms.Form):
 class DomainOrgNameAddressForm(forms.ModelForm):
     """Form for updating the organization name and mailing address."""
 
+    # for federal agencies we also want to know the top-level agency.
+    federal_agency = forms.ModelChoiceField(
+        label="Federal agency",
+        required=False,
+        queryset=FederalAgency.objects.all(),
+        empty_label="--Select--",
+        widget=ComboboxWidget,
+    )
     zipcode = forms.CharField(
         label="Zip code",
         validators=[
@@ -469,6 +466,16 @@ class DomainOrgNameAddressForm(forms.ModelForm):
         },
     )
 
+    state_territory = forms.ChoiceField(
+        label="State, territory, or military post",
+        required=True,
+        choices=[("", "--Select--")] + DomainInformation.StateTerritoryChoices.choices,
+        error_messages={
+            "required": ("Select the state, territory, or military post where your organization is located.")
+        },
+        widget=ComboboxWidget(),
+    )
+
     class Meta:
         model = DomainInformation
         fields = [
@@ -486,25 +493,12 @@ class Meta:
             "organization_name": {"required": "Enter the name of your organization."},
             "address_line1": {"required": "Enter the street address of your organization."},
             "city": {"required": "Enter the city where your organization is located."},
-            "state_territory": {
-                "required": "Select the state, territory, or military post where your organization is located."
-            },
         }
         widgets = {
-            # We need to set the required attributed for State/territory
-            # because for this fields we are creating an individual
-            # instance of the Select. For the other fields we use the for loop to set
-            # the class's required attribute to true.
             "organization_name": forms.TextInput,
             "address_line1": forms.TextInput,
             "address_line2": forms.TextInput,
             "city": forms.TextInput,
-            "state_territory": forms.Select(
-                attrs={
-                    "required": True,
-                },
-                choices=DomainInformation.StateTerritoryChoices.choices,
-            ),
             "urbanization": forms.TextInput,
         }