bug #5606 Match navLinkTab by data-bs-target or href (Sajito)

This PR was merged into the 4.x branch. Discussion ---------- Match navLinkTab by data-bs-target or href These are the same ways bootstrap uses to get the tab-pane. This allows getting the correct navLinkTab without relying on a id naming scheme Fixes #5601 Commits ------- b5b67cc Match navLinkTab by data-bs-target or href
EasyCorp · Feb 17, 2023 · 8eab55c · 8eab55c
2 parents 237d474 + b5b67cc
commit 8eab55c
Show file tree

Hide file tree

Showing 4 changed files with 26 additions and 22 deletions.
diff --git a/assets/js/form.js b/assets/js/form.js
@@ -41,7 +41,7 @@ class Form {
                     document.querySelectorAll('.form-tabs .nav-item .badge-danger.badge').forEach( (badge) => {
                         badge.parentElement.removeChild(badge);
                     });
-                    
+
                     if (null !== form.getAttribute('novalidate')) {
                         return;
                     }
@@ -54,25 +54,29 @@ class Form {
                             // Adding a badge with a error count next to the tab label
                             const formTab = input.closest('div.tab-pane');
                             if (formTab) {
-                                const navLinkTab = document.querySelector(`#${ formTab.id }-tab`);
-                                const badge = navLinkTab.querySelector('.badge');
-                                if (badge) {
-                                    // Increment number of error
-                                    badge.textContent = (parseInt(badge.textContent) + 1).toString();
-                                } else {
-                                    // Create a new badge
-                                    let newErrorBadge = document.createElement('span');
-                                    newErrorBadge.classList.add('badge', 'badge-danger');
-                                    newErrorBadge.title = 'form.tab.error_badge_title';
-                                    newErrorBadge.textContent = '1';
-                                    navLinkTab.appendChild(newErrorBadge);
-                                }
-                                navLinkTab.addEventListener('click', function onFormNavLinkTabClick() {
-                                    navLinkTab.querySelectorAll('.badge-danger.badge').forEach( (badge) => {
-                                        badge.parentElement.removeChild(badge);
+                                // Match tab link either by "data-bs-target" attribute or by href linking to the id anchor
+                                const navLinkTab = document.querySelector(`[data-bs-target="#${ formTab.id }"],a[href="${ formTab.id }"]`);
+
+                                if (navLinkTab) {
+                                    const badge = navLinkTab.querySelector('.badge');
+                                    if (badge) {
+                                        // Increment number of error
+                                        badge.textContent = (parseInt(badge.textContent) + 1).toString();
+                                    } else {
+                                        // Create a new badge
+                                        let newErrorBadge = document.createElement('span');
+                                        newErrorBadge.classList.add('badge', 'badge-danger');
+                                        newErrorBadge.title = 'form.tab.error_badge_title';
+                                        newErrorBadge.textContent = '1';
+                                        navLinkTab.appendChild(newErrorBadge);
+                                    }
+                                    navLinkTab.addEventListener('click', function onFormNavLinkTabClick() {
+                                        navLinkTab.querySelectorAll('.badge-danger.badge').forEach( (badge) => {
+                                            badge.parentElement.removeChild(badge);
+                                        });
+                                        navLinkTab.removeEventListener('click', onFormNavLinkTabClick);
                                     });
-                                    navLinkTab.removeEventListener('click', onFormNavLinkTabClick);
-                                });
+                                }
                             }
 
                             // Visual feedback for group

diff --git a/src/Resources/public/entrypoints.json b/src/Resources/public/entrypoints.json
@@ -11,7 +11,7 @@
     },
     "form": {
       "js": [
-        "/form.51fd6a48.js"
+        "/form.89417636.js"
       ]
     },
     "page-layout": {

diff --git a/src/Resources/public/form.51fd6a48.js → src/Resources/public/form.89417636.js b/src/Resources/public/form.51fd6a48.js → src/Resources/public/form.89417636.js
diff --git a/src/Resources/public/manifest.json b/src/Resources/public/manifest.json
@@ -2,7 +2,7 @@
   "app.css": "app.db040f2c.css",
   "app.rtl.css": "app.db040f2c.rtl.css",
   "app.js": "app.7ef09592.js",
-  "form.js": "form.51fd6a48.js",
+  "form.js": "form.89417636.js",
   "page-layout.js": "page-layout.3347892e.js",
   "page-color-scheme.js": "page-color-scheme.a1568167.js",
   "field-boolean.js": "field-boolean.33d03224.js",