Other AC

src/registrar/assets/js/get-gov.js

@@ -1950,3 +1950,26 @@ document.addEventListener('DOMContentLoaded', function() {
   showInputOnErrorFields();
 
 })();
+
+/**
+ * An IIFE that adds the default selection on comboboxes to the input field.
+ * This is because this action doesn't get fired by the time the page loads
+ */
+(function finishUserSetupListener() {
+  document.addEventListener('DOMContentLoaded', (event) => {
+    const comboBoxElements = document.querySelectorAll('.usa-combo-box');
+    comboBoxElements.forEach(comboBox => {
+      const select = comboBox.querySelector('select');
+      const input = comboBox.querySelector('input');
+
+      // Find the selected option
+      const selectedOption = select.querySelector('option[selected]');
+      
+      // If there's a selected option, set its text as the input value
+      if (selectedOption) {
+        input.value = selectedOption.textContent;
+        comboBox.classList.add('usa-combo-box--pristine');
+      }
+    });
+  });
+})();

src/registrar/forms/domain.py

@@ -511,26 +511,17 @@ class DomainOrgNameAddressForm(forms.ModelForm):
 class DomainSuborganizationForm(forms.ModelForm):
     """Form for updating the suborganization"""
 
+    sub_organization = forms.ModelChoiceField(
+        queryset=Suborganization.objects.none(),
+        required=False,
+        widget=forms.Select(),
+    )
+
     class Meta:
         model = DomainInformation
         fields = [
             "sub_organization",
         ]
-        error_messages = {
-            "sub_organization": {"required": "Select a suborganization."},
-        }
-        widgets = {
-            "sub_organization": forms.Select(
-                attrs={
-                    "required": False,
-                },
-            ),
-        }
-
-    # the database fields have blank=True so ModelForm doesn't create
-    # required fields by default. Use this list in __init__ to mark each
-    # of these fields as required
-    required = ["sub_organization"]
 
     def __init__(self, *args, **kwargs):
         super().__init__(*args, **kwargs)
@@ -539,8 +530,13 @@ class DomainSuborganizationForm(forms.ModelForm):
             self.fields['sub_organization'].queryset = Suborganization.objects.filter(
                 portfolio=self.instance.portfolio
             )
-        else:
-            self.fields['sub_organization'].queryset = Suborganization.objects.none()
+        
+        # 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"
+
 
 
 class DomainDnssecForm(forms.Form):

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

@@ -0,0 +1,3 @@
+<div class="usa-combo-box" data-initial-value="{{ widget.value }}">
+    {% include "django/forms/widgets/select.html" %}
+</div>

src/registrar/templates/domain_suborganization.html

@@ -15,7 +15,6 @@
         If you believe there is an error please contact <a href="mailto:help@get.gov" class="usa-link">help@get.gov</a>.
     </p>
 
-    {% include "includes/required_fields.html" %}
     <form class="usa-form usa-form--large" method="post" novalidate id="form-container">
         {% csrf_token %}
         {% input_with_errors form.sub_organization %}