Ever expanding table when the table is inside a and enabling a intially hidden column

henrik k

Link to test case: https://live.datatables.net/yezejila/1/
Error messages shown: ResizeObserver loop completed with undelivered notifications.
Description of problem:

We're initiating a datatable within a HTML <dialog>, with the colvis extension to enable the user to show and hide specific columns at user discretion.

But when enabling a column that has been set as initially hidden, e.g. visible: false, the dialog window starts to expand in an infinite loop. When looking at the console in Safari I'm getting the error message "ResizeObserver loop completed with undelivered notifications.". The same thing happens in Firefox as well.

The exact same code works flawlessly when the datatable is initated directly on the page, e.g. when it's not inside the <dialog> element.

(I've yet been able to create this problem in live.datatables.net, intially because I can't find the col vis extension in the library popup menu there, only the button extension.)

The CSS for the dialog is set as:

dialog {
border-width: 2px;
border-color: #495057;
z-index: 20;
margin: 0;
left: 50%;
top: 300px;
width: fit-content;
height: fit-content;
}

(Don't know if this is relevant or not)

kthorngren

I usually use the Download Builder to get the appropriate libraries for the JS Bin environment. I updated your test case to include Colvis and hid the Position column on initialization:
https://live.datatables.net/yezejila/2/edit

I don't see the issue in Chrome but do see the messages in Safari. To replicate I made the Position column visible then hide it again.

@allan will need to take a look.

Kevin

allan

Interesting - thank you for the test case Kevin!

I've just tried Firefox 149.0.2 and it doesn't appear to show the issue for me. I'll see if I can grab a Mac sometime soon and try Safari on it.

Allan

henrik k

This seems to be a little odd issue, I don't see the problem in the test case you set up Kevin, not on Firefox 151 and not on Safari.

But the problem persists for me on my local site, both on Safari and on Firefox 151 and just tested on Chrome as well.

In Firefox I'm actually not getting any error message, but the table does continue expand, even if I hide the column that caused the problem initially.

On Chrome the error message is actually another one:
"A form field element should have an id or name attribute"

kthorngren

To replicate the issue in Safari I need to have the page in Live Preview mode:

On Chrome the error message is actually another one:
"A form field element should have an id or name attribute"

I don't see that error in the test case but if you see it with your page but not with the test case then likely it is something specific to your HTML.

Kevin

henrik k

I've got a couple of other extensions added and are using bootstrap 5 as well so I'll really try to replicate the issue as a test case.

The strange thing is that everything works when the exact same table is initiated direct in the DOM, as long as I don't put the datatables in the dynamically created dialog element.