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

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,10 @@ class DomainSuborganizationForm(forms.ModelForm):
     """Form for updating the suborganization"""
 
     sub_organization = forms.ModelChoiceField(
+        label="Suborganization name",
         queryset=Suborganization.objects.none(),
         required=False,
-        widget=forms.Select(),
+        widget=ComboboxWidget,
     )
 
     class Meta:
@@ -178,20 +180,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 +444,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 +465,17 @@ class DomainOrgNameAddressForm(forms.ModelForm):
         },
     )
 
+    state_territory = forms.ChoiceField(
+        label="State, territory, or military post",
+        required=True,
+        choices=DomainInformation.StateTerritoryChoices.choices,
+        widget=ComboboxWidget(
+            attrs={
+                "required": True,
+            }
+        ),
+    )
+
     class Meta:
         model = DomainInformation
         fields = [
@@ -491,20 +498,10 @@ class Meta:
             },
         }
         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,
         }
 

src/registrar/forms/domain_request_wizard.py

@@ -7,6 +7,7 @@
 from django.core.validators import RegexValidator, MaxLengthValidator
 from django.utils.safestring import mark_safe
 
+from registrar.forms.utility.combobox import ComboboxWidget
 from registrar.forms.utility.wizard_form_helper import (
     RegistrarForm,
     RegistrarFormSet,
@@ -44,6 +45,7 @@ class RequestingEntityForm(RegistrarForm):
         required=False,
         queryset=Suborganization.objects.none(),
         empty_label="--Select--",
+        widget=ComboboxWidget,
     )
     requested_suborganization = forms.CharField(
         label="Requested suborganization",
@@ -57,6 +59,7 @@ class RequestingEntityForm(RegistrarForm):
         label="State, territory, or military post",
         required=False,
         choices=[("", "--Select--")] + DomainRequest.StateTerritoryChoices.choices,
+        widget=ComboboxWidget,
     )
 
     def __init__(self, *args, **kwargs):
@@ -275,6 +278,7 @@ class OrganizationContactForm(RegistrarForm):
         required=False,
         queryset=FederalAgency.objects.exclude(agency__in=excluded_agencies),
         empty_label="--Select--",
+        widget=ComboboxWidget,
     )
     organization_name = forms.CharField(
         label="Organization name",
@@ -298,6 +302,7 @@ class OrganizationContactForm(RegistrarForm):
         error_messages={
             "required": ("Select the state, territory, or military post where your organization is located.")
         },
+        widget=ComboboxWidget,
     )
     zipcode = forms.CharField(
         label="Zip code",

src/registrar/forms/portfolio.py

@@ -6,6 +6,7 @@
 from django.core.validators import MaxLengthValidator
 from django.utils.safestring import mark_safe
 
+from registrar.forms.utility.combobox import ComboboxWidget
 from registrar.models import (
     PortfolioInvitation,
     UserPortfolioPermission,
@@ -33,6 +34,12 @@ class PortfolioOrgAddressForm(forms.ModelForm):
             "required": "Enter a 5-digit or 9-digit zip code, like 12345 or 12345-6789.",
         },
     )
+    state_territory = forms.ChoiceField(
+        label="State, territory, or military post",
+        required=True,
+        choices=DomainInformation.StateTerritoryChoices.choices,
+        widget=ComboboxWidget,
+    )
 
     class Meta:
         model = Portfolio
@@ -53,19 +60,9 @@ class Meta:
             "zipcode": {"required": "Enter a 5-digit or 9-digit zip code, like 12345 or 12345-6789."},
         }
         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.
             "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,
         }
 

src/registrar/forms/utility/combobox.py

@@ -0,0 +1,5 @@
+from django.forms import Select
+
+
+class ComboboxWidget(Select):
+    template_name = "django/forms/widgets/combobox.html"

src/registrar/templates/django/forms/widgets/combobox.html

@@ -11,6 +11,7 @@
         {{ name }}="{{ value }}"
     {% endif %}
 {% endfor %}
+data-default-value="{% for group_name, group_choices, group_index in widget.optgroups %}{% for option in group_choices %}{% if option.selected %}{{ option.value }}{% endif %}{% endfor %}{% endfor %}"
 >
-    {% include "django/forms/widgets/select.html" %}
+    {% include "django/forms/widgets/select.html" with is_combobox=True %}
 </div>

src/registrar/templates/django/forms/widgets/select.html

@@ -3,6 +3,9 @@
     {# hint: spacing in the class string matters #}
     class="usa-select{% if classes %} {{ classes }}{% endif %}"
     {% include "django/forms/widgets/attrs.html" %}
+    {% if is_combobox %}
+      data-default-value="{% for group_name, group_choices, group_index in widget.optgroups %}{% for option in group_choices %}{% if option.selected %}{{ option.value }}{% endif %}{% endfor %}{% endfor %}"
+    {% endif %}
 >
   {% for group, options, index in widget.optgroups %}
     {% if group %}<optgroup label="{{ group }}">{% endif %}

src/registrar/tests/test_reports.py

@@ -900,6 +900,7 @@ def test_member_export(self):
         # spaces and leading/trailing whitespace
         csv_content = csv_content.replace(",,", "").replace(",", "").replace(" ", "").replace("\r\n", "\n").strip()
         expected_content = expected_content.replace(",,", "").replace(",", "").replace(" ", "").strip()
+        self.maxDiff = None
         self.assertEqual(csv_content, expected_content)