#4688: Fix DNS record type state on Add record form

src/registrar/templates/domain_dns_record_form_content.html

@@ -48,7 +48,7 @@ <h3 class="margin-top-0 margin-bottom-0">Add record</h3>
     <button
         type="reset"
         class="usa-button usa-button--outline js-dnsrecord-cancel-button"
-        x-on:click="showFormId = null"
+        x-on:click="showFormId = null; recordType = ''"
     >
         Cancel
     </button>

src/registrar/templates/domain_dns_records.html

@@ -15,7 +15,7 @@
 
 {% block domain_content %}
 <!-- Wrapped div to store showFormId to track across all the forms on the page, so only one form appears at a time-->
-<div x-data="{ showFormId: null, recordType: '', openComments: []}" @record-submit-success.camel.window="showFormId = null">
+<div x-data="{ showFormId: null, recordType: '', openComments: []}" @record-submit-success.camel.window="showFormId = null; recordType = ''">
 
     {% include "includes/form_errors.html" with form=form %}
     <div id="dnsrecords-form-container">
@@ -38,7 +38,7 @@ <h2 class="margin-top-0 margin-bottom-0">Manage DNS records</h2>
                             class="usa-button"
                             id="add-dnsrecord-button"
                             type="button"
-                            x-on:click="showFormId = 0"
+                            x-on:click="showFormId = 0; recordType = ''"
                         >
                             Add record
                         </button>

src/registrar/tests/views/test_domain_dns_record_and_form.py

@@ -92,6 +92,35 @@ def test_get_renders_page_success(self):
         # Assert we are on the correct page
         self.assertContains(page, "Add record</h3>")
 
+    @override_flag("dns_hosting", active=True)
+    @less_console_noise_decorator
+    def test_add_record_resets_record_type_alpine_state(self):
+        """Issue #4688: after adding a record and clicking 'Add record' again, the
+        form was opening with the rest of the fields already showing, like a type
+        had already been picked.
+
+        Turns out the `recordType` variable was sticking around between submissions,
+        so even though the dropdown re-rendered empty, the form body was still being
+        shown because `x-show='recordType'` was still true from the last time.
+
+        The fix is to clear `recordType` in the same spots we clear `showFormId`:
+        when Add record is clicked, when a submit succeeds, and when Cancel is hit.
+        This test just makes sure those click handlers stay wired up so the bug
+        doesn't sneak back in if someone edits the template later.
+        """
+        response = self.client.get(self._url())
+
+        # When a submit succeeds, both the form ID and the picked type need to clear.
+        self.assertContains(
+            response,
+            "@record-submit-success.camel.window=\"showFormId = null; recordType = ''\"",
+        )
+        # Clicking 'Add record' should always start fresh, even if something earlier
+        # left recordType set.
+        self.assertContains(response, "x-on:click=\"showFormId = 0; recordType = ''\"")
+        # Cancel should also clear it so reopening the form looks like a fresh start.
+        self.assertContains(response, "x-on:click=\"showFormId = null; recordType = ''\"")
+
     @override_flag("dns_hosting", active=True)
     @less_console_noise_decorator
     def test_post_valid_forms_create_dns_records_success(self):