Fix TableBlock initialisation

- move Handsontable render after load & resize width after load
- stops firing a resize event
- adjusts targets to account for the changed markup
- fixes #9107

CHANGELOG.txt

@@ -46,6 +46,7 @@ Changelog
  * Fix: Fix radio and checkbox elements shrinking when using a long label (Sage Abdullah)
  * Fix: Fix select elements expanding beyond their container when using a long option label (Sage Abdullah)
  * Fix: Fix timezone handling of `TemplateResponse`s for users with a custom timezone (Stefan Hammer, Sage Abdullah)
+ * Fix: Ensure TableBlock initialisation correctly runs after load and its width is aligned with the parent panel (Dan Braghis)
  * Docs: Add code block to make it easier to understand contribution docs (Suyash Singh)
  * Docs: Add new "Icons" page for icons customisation and reuse across the admin interface (Coen van der Kamp)
  * Docs: Fix broken formatting for MultiFieldPanel / FieldRowPanel permission kwarg docs (Matt Westcott)

client/src/entrypoints/contrib/table_block/table.js

@@ -20,20 +20,17 @@ function initTable(id, tableOptions) {
   let isInitialized = false;
 
   const getWidth = function () {
-    return $('.w-field--table_input').closest('.sequence-member-inner').width();
+    return $('.w-field--table_input').closest('.w-panel').width();
   };
   const getHeight = function () {
     const tableParent = $('#' + id).parent();
-    return (
-      tableParent.find('.htCore').height() +
-      tableParent.find('[data-field]').height() * 2
-    );
+    let htCoreHeight = 0;
+    tableParent.find('.htCore').each(function () {
+      htCoreHeight += $(this).height();
+    });
+    return htCoreHeight + tableParent.find('[data-field]').first().height();
   };
-  const resizeTargets = [
-    '[data-field] > .handsontable',
-    '.wtHider',
-    '.wtHolder',
-  ];
+  const resizeTargets = ['.handsontable', '.wtHider', '.wtHolder'];
   const resizeHeight = function (height) {
     const currTable = $('#' + id);
     $.each(resizeTargets, function () {
@@ -70,7 +67,7 @@ function initTable(id, tableOptions) {
   }
 
   if (hasOwn(!tableOptions, 'width') || hasOwn(!tableOptions, 'height')) {
-    // Size to parent .sequence-member-inner width if width is not given in tableOptions
+    // Size to parent field width if width is not given in tableOptions
     $(window).on('resize', () => {
       hot.updateSettings({
         width: getWidth(),
@@ -173,15 +170,12 @@ function initTable(id, tableOptions) {
   });
 
   hot = new Handsontable(document.getElementById(containerId), finalOptions);
-  hot.render(); // Call to render removes 'null' literals from empty cells
-
-  // Apply resize after document is finished loading (parent .sequence-member-inner width is set)
-  if ('resize' in $(window)) {
+  window.addEventListener('load', () => {
+    // Render the table. Calling render also removes 'null' literals from empty cells.
+    hot.render();
     resizeHeight(getHeight());
-    $(window).on('load', () => {
-      $(window).trigger('resize');
-    });
-  }
+    resizeWidth(getWidth());
+  });
 }
 window.initTable = initTable;
 

client/src/entrypoints/contrib/table_block/table.test.js

@@ -139,9 +139,11 @@ describe('telepath: wagtail.widgets.TableInput', () => {
     expect(handsontableConstructorMock.mock.calls[0][1].stretchH).toBe('all');
   });
 
-  test('Handsontable.render is called', () => {
-    render();
-    expect(renderMock.mock.calls.length).toBe(1);
+  test('Handsontable.render is called on window.load', () => {
+    window.dispatchEvent(new Event('load'));
+    // Note: checking that render() was called, rather that it was called once
+    // dispatchEvent seems to trigger the 'load' event twice.
+    expect(renderMock).toHaveBeenCalled();
     expect(renderMock.mock.calls[0].length).toBe(0);
   });
 

docs/releases/5.0.md

@@ -60,6 +60,7 @@ Support for adding custom validation logic to StreamField blocks has been formal
  * Fix radio and checkbox elements shrinking when using a long label (Sage Abdullah)
  * Fix select elements expanding beyond their container when using a long option label (Sage Abdullah)
  * Fix timezone handling of `TemplateResponse`s for users with a custom timezone (Stefan Hammer, Sage Abdullah)
+ * Ensure TableBlock initialisation correctly runs after load and its width is aligned with the parent panel (Dan Braghis)
 
 ### Documentation