Set initial value using the template rather than js

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

@@ -1985,35 +1985,3 @@ 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 loadInitialValuesForComboBoxes() {
-  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 the default name is "------", then this indicates that the field is blank.
-      // Don't populate in this case.
-      if (selectedOption) {
-        // Check to make sure the value isn't just a line of dashes.
-        // Caveat: we can't have any suborgs named "------". This is OK.
-        const isEmptyValue = /^-+$/.test(selectedOption.textContent);
-        if (!isEmptyValue) {
-          input.value = selectedOption.textContent;
-          comboBox.classList.add('usa-combo-box--pristine');
-        }
-      }
-    });
-  });
-})();

src/registrar/forms/domain.py

@@ -186,11 +186,19 @@ class DomainSuborganizationForm(forms.ModelForm):
         
         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
+        self.fields['sub_organization'].widget.attrs['data-default-value'] = self.instance.sub_organization.pk if self.instance and self.instance.sub_organization else ''
+
     
     def get_suborganization_name(self):
         """Returns the suborganization name for the readonly view"""

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

@@ -1,3 +1,7 @@
-<div class="usa-combo-box">
+<div class="usa-combo-box"     
+{% for name, value in widget.attrs.items %}
+    {{ name }}="{{ value }}"
+{% endfor %}
+>
     {% include "django/forms/widgets/select.html" %}
 </div>

src/registrar/tests/test_views_domain.py

@@ -1577,6 +1577,52 @@ class TestDomainOrganization(TestDomainOverview):
 class TestDomainSuborganization(TestDomainOverview):
     """Tests the Suborganization page for portfolio users"""
 
+    @less_console_noise_decorator
+    @override_flag("organization_feature", active=True)
+    def test_edit_suborganization_field(self):
+        
+        # Create a portfolio and two suborgs
+        portfolio = Portfolio.objects.create(creator=self.user, organization_name="Ice Cream")
+        suborg = Suborganization.objects.create(portfolio=portfolio, name="Vanilla")
+        suborg_2 = Suborganization.objects.create(portfolio=portfolio, name="Chocolate")
+
+        # Create an unrelated portfolio
+        unrelated_portfolio = Portfolio.objects.create(creator=self.user, organization_name="Fruit")
+        unrelated_suborg = Suborganization.objects.create(portfolio=portfolio, name="Apple")
+
+        # Add the portfolio to the domain_information object
+        self.domain_information.portfolio = portfolio
+
+        # Add a organization_name to test if the old value still displays
+        self.domain_information.organization_name = "Broccoli"
+        self.domain_information.save()
+        self.domain_information.refresh_from_db()
+
+        # Add portfolio perms to the user object
+        self.user.portfolio = portfolio
+        self.user.portfolio_roles = [UserPortfolioRoleChoices.ORGANIZATION_ADMIN]
+        self.user.save()
+        self.user.refresh_from_db()
+
+        # Navigate to the suborganization page
+        page = self.app.get(reverse("domain-suborganization", kwargs={"pk": self.domain.id}))
+
+        print(page)
+        # The page should contain the choices Vanilla and Chocolate
+        self.assertContains(page, "Vanilla")
+        self.assertContains("Chocolate")
+        self.assertNotContains("Apple")
+
+        # Try changing the suborg
+        session_id = self.app.cookies[settings.SESSION_COOKIE_NAME]
+        page.form["suborganization"] = suborg_2
+        self.app.set_cookie(settings.SESSION_COOKIE_NAME, session_id)
+        page.form.submit()
+
+        self.assertContains(page, "The suborganization name for this domain has been updated.")
+        self.assertNotContains(page, "Vanilla")
+        self.assertContains("Chocolate")
+
     @less_console_noise_decorator
     @override_flag("organization_feature", active=True)
     def test_has_suborganization_field_on_overview_with_flag(self):