From 87f61e4af7bb919bc933181bc17cf91763ccce4f Mon Sep 17 00:00:00 2001 From: Benjamin Todd Donovan Date: Mon, 13 Jul 2026 11:25:23 -0600 Subject: [PATCH] Fix identical IDs in every table instance This fixes issue #4920 This bug was introduced in 6.4.0 when a non-random non-unique ID was applied to the tabulator-table-body in RowManager.js. This was done so that the table element could aria-own the tabulator-table-body. This results in non-unique duplicate IDs in the DOM in pages which render more than one tabulator-table. The fix captures the ID of the table element if it exists and generates a pseudo-random suffix if it does not. The value is stored in this.instanceId. The value is then appended to the aria-owns attribute in Tabulator.js and to the ID attribute in RowManager. This ensures that the ID will either be based on the ID of the owning table or randomized enough that it will be very unlikely for two tabulator-table-body elements to have the same ID while still allowing the body to be aria-owned by the table element. --- src/js/core/RowManager.js | 2 +- src/js/core/Tabulator.js | 8 +++++++- 2 files changed, 8 insertions(+), 2 deletions(-) diff --git a/src/js/core/RowManager.js b/src/js/core/RowManager.js index 12357e21d..ca38e4d29 100644 --- a/src/js/core/RowManager.js +++ b/src/js/core/RowManager.js @@ -61,7 +61,7 @@ export default class RowManager extends CoreFeature{ el.classList.add("tabulator-table"); el.setAttribute("role", "rowgroup"); - el.setAttribute("id", "tabulator-table-body"); + el.setAttribute("id", "tabulator-table-body-" + this.table.instanceId); return el; } diff --git a/src/js/core/Tabulator.js b/src/js/core/Tabulator.js index ad0c2572d..45869d7cc 100644 --- a/src/js/core/Tabulator.js +++ b/src/js/core/Tabulator.js @@ -75,6 +75,12 @@ class Tabulator extends ModuleBinder{ if(this.initializeElement(element)){ + if (this.element.id) { + this.instanceId = this.element.id; + } else { + this.instanceId = Math.random().toString(36).slice(2, 7); + } + this.initializeCoreSystems(options); //delay table creation to allow event bindings immediately after the constructor @@ -232,7 +238,7 @@ class Tabulator extends ModuleBinder{ element.classList.add("tabulator"); element.setAttribute("role", "grid"); - element.setAttribute("aria-owns", "tabulator-table-body"); + element.setAttribute("aria-owns", "tabulator-table-body-" + this.instanceId); //empty element while(element.firstChild) element.removeChild(element.firstChild);