fix: WhatLanguage

src/ui/manage-ui/src/FamilyHubs.ServiceDirectory.Admin.Web/scripts/app.ts

@@ -1,4 +1,4 @@
-export { };
+export {};
 
 declare const accessibleAutocomplete: any;
 declare global {
@@ -61,7 +61,7 @@ function setupLanguageAutocompleteWhenAddAnother(element: HTMLElement) {
 
     const languageSelects = element.querySelectorAll("select[id^='language-']") as NodeListOf<HTMLSelectElement>;
 
-/*    console.log('enhancing ' + languageSelects.length + ' language selects');*/
+    /*    console.log('enhancing ' + languageSelects.length + ' language selects');*/
 
     // work around accessible-autocomplete not handling errors or using standard govuk styling classes
     // there's a discussion about handling errors here...
@@ -117,7 +117,7 @@ function setupLanguageAutocompleteWhenAddAnother(element: HTMLElement) {
         }
     });
 
-    domObserver.observe(element, { childList: true, subtree: true, attributes: true });
+    domObserver.observe(element, {childList: true, subtree: true, attributes: true});
 
     languageSelects.forEach(function (select) {
         accessibleAutocomplete.enhanceSelectElement({
@@ -141,18 +141,18 @@ function addGovUkClasses(input: HTMLInputElement, errorState: boolean) {
 /**
  * This function is used to update the "Remove" button text in the "Add another" component
  * and update the label text for each item in the "Add another" component when adding a new language item to the DOM.
- * 
+ *
  * NOTE: Adding of DOM elements is done in the familyhubs-frontend FamilyHubsFrontend.AddAnother.prototype list.
  * Doing this UI update here as it makes sense being that it's only for the language page.
  */
-function handleUpdatingLanguageAddAnother(){
+function handleUpdatingLanguageAddAnother() {
     function updateAllRemoveButtonText() {
         const items = document.querySelectorAll('.fh-add-another__item');
 
         items.forEach((item, index) => {
             const button = item.querySelector('.fh-add-another__remove-button') as HTMLButtonElement;
             if (button) {
-                button.textContent = `Remove ${(index + 1)}`;
+                button.textContent = `Remove language ${(index + 1)}`;
             }
         });
     }
@@ -162,28 +162,28 @@ function handleUpdatingLanguageAddAnother(){
 
         items.forEach((item, index) => {
             const label = item.querySelector('label');
-            if(label) {
+            if (label) {
                 label.textContent = `Enter language ${(index + 1)}`;
             }
         });
     }
 
-    // Observe DOM changes to react to new items being added
+    // Observe DOM changes to react to new items being added/removed
     const observer = new MutationObserver((mutationsList, observer) => {
         for (const mutation of mutationsList) {
-            if (mutation.type === 'childList')
-            {
-                updateAllRemoveButtonText();
+            const mixedNodes = Array.from(mutation.addedNodes).concat(Array.from(mutation.removedNodes));
+            if (mutation.type === 'childList' && (mixedNodes.some(node => node.nodeName === 'FIELDSET'))) {
+
                 updateAllLanguageLabelText();
+                updateAllRemoveButtonText();
             }
         }
     });
 
     const container = document.getElementById('fh-add-another-id');
-    if(container) {
-        observer.observe(container, { childList: true, subtree: true});
+    if (container) {
+        observer.observe(container, {childList: true, subtree: true});
     }
-
 }
 
 //todo: this is a hack - we want setupLanguageAutocompleteWhenAddAnother to be in the generated js file.