Fix detail cells to toggle their state when clicked anywhere within t…

…he cell, including nested elements
discoveryjs · Dec 11, 2024 · 189f033 · 189f033
1 parent 00ab197
commit 189f033
Show file tree

Hide file tree

Showing 2 changed files with 33 additions and 36 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -30,6 +30,7 @@
 - Changes in `table` view:
     - Added `headerClassName` option in col config which behaves the same way as `className` but applies to header cell
     - Added `view-table-header-cell` class to header cell elements
+    - Fixed detail cells to toggle their state when clicked anywhere within the cell, including nested elements, unless the click event's propagation is stopped
 - Changes in `input` view:
     - Added `htmlStep` option
     - Added props normalization

diff --git a/src/views/table/table-cell.js b/src/views/table/table-cell.js
@@ -76,47 +76,43 @@ export default function(host) {
 
         if ((details || (details === undefined && isDataObject)) && host.queryBool(detailsWhen, data, context)) {
             el.classList.add('details');
-            el.addEventListener('click', (e) => {
-                let node = e.target;
-
-                if (node === el) {
-                    const rowEl = node.parentNode;
-                    const bodyEl = rowEl.parentNode;
-                    const currentDetailsEl = Array
-                        .from(bodyEl.querySelectorAll('.view-table-cell.details-expanded'))
-                        .find(td => td.parentNode.parentNode === bodyEl);
-                    let detailsEl = null;
-
-                    if (currentDetailsEl) {
-                        const currentDetailsRowEl = currentDetailsEl.parentNode;
-
-                        currentDetailsEl.classList.remove('details-expanded');
-
-                        if (currentDetailsEl === el) {
-                            rowEl.nextSibling.remove();
-                            return;
-                        }
-
-                        if (currentDetailsRowEl !== rowEl) {
-                            currentDetailsRowEl.nextSibling.remove();
-                        } else {
-                            detailsEl = rowEl.nextSibling.firstChild;
-                            detailsEl.innerHTML = '';
-                        }
+            el.addEventListener('click', () => {
+                const rowEl = el.parentNode;
+                const bodyEl = rowEl.parentNode;
+                const currentDetailsEl = Array
+                    .from(bodyEl.querySelectorAll('.view-table-cell.details-expanded'))
+                    .find(td => td.parentNode.parentNode === bodyEl);
+                let detailsEl = null;
+
+                if (currentDetailsEl) {
+                    const currentDetailsRowEl = currentDetailsEl.parentNode;
+
+                    currentDetailsEl.classList.remove('details-expanded');
+
+                    if (currentDetailsEl === el) {
+                        rowEl.nextSibling.remove();
+                        return;
                     }
 
-                    if (detailsEl === null) {
-                        detailsEl = rowEl.parentNode
-                            .insertBefore(document.createElement('tr'), rowEl.nextSibling)
-                            .appendChild(document.createElement('td'));
-                        detailsEl.parentNode.className = 'view-table-cell-details-row';
-                        detailsEl.className = 'view-cell-details-content';
-                        detailsEl.colSpan = 1000;
+                    if (currentDetailsRowEl !== rowEl) {
+                        currentDetailsRowEl.nextSibling.remove();
+                    } else {
+                        detailsEl = rowEl.nextSibling.firstChild;
+                        detailsEl.innerHTML = '';
                     }
+                }
 
-                    el.classList.add('details-expanded');
-                    host.view.render(detailsEl, details || defaultDetailsRender, data, context);
+                if (detailsEl === null) {
+                    detailsEl = rowEl.parentNode
+                        .insertBefore(document.createElement('tr'), rowEl.nextSibling)
+                        .appendChild(document.createElement('td'));
+                    detailsEl.parentNode.className = 'view-table-cell-details-row';
+                    detailsEl.className = 'view-cell-details-content';
+                    detailsEl.colSpan = 1000;
                 }
+
+                el.classList.add('details-expanded');
+                host.view.render(detailsEl, details || defaultDetailsRender, data, context);
             });
         }