SearchPanes not clickable (initially) until ShowAll button is used

glimpsed_chaos

Link to test case: https://live.datatables.net/tuwabime/2/
Error messages shown: No errors shown
Description of problem: When data is loaded at some point after the table has been initialized and I click on any of the SearchPane filters, they do not respond.

In my example, I have a button to load data and draw. I also have a rebuildPane() included after the draw.

Before clicking, 3 filters are available and I can click on any of the filters showing and they expand, I can click Show All as well. Looks good.

    $("#testUpdate").on("click", function (e) {
        var examples_table = $('#example').DataTable().clear().rows.add(thisData).order([]).draw();
        $('#example').DataTable().searchPanes.rebuildPane();
    });

After clicking the 'Update' button, the data loads and the table is drawn. No issue. The rebuildPane() is needed to add the column render for 'Users' to the specified filter. Now all 4 filters appear as expected.

At this point if I attempt to click on any of the filters they do NOT expand. I must click 'Show All first'. After clicking 'Show All' I can click 'Collapse All'. Now all 4 filters are clickable and expand when clicked.

Am I missing something when rebuilding the SearchPanes?

glimpsed_chaos

*** Politely bumping ***

If something was not clear please let me know. I believe something is off or not accounted for when rebuilding the searchPanes. Or it's a bug, but I don't want to say that it is until other problems have been eliminated.

glimpsed_chaos

*** Politely bumping ***

Also interested in knowing how I can get the "Users" in the SearchPanes to appear like the other 3 SearchPanes before the data is loaded. It's kind of odd to see it not there then suddenly it appears and the SearchPanes adjust across top.

Thank you for your consideration and any assistance you can provide.

colin

I just tried this and it appears to be working as expected for me.

I did the following:

1. Run with JS
2. Expanded and collapsed the App Type pane - all good
3. Clicked Update - data loaded as expected
4. Again, expanded and collapsed the App Type pane - all good

Are these steps correct, or am I missing something?

Colin

glimpsed_chaos

@colin Following the steps you are doing fails at step 4. Clicking App Type at that point does not expand. But to be clear I am clicking the input field of "App Type", not the down caret.

Before clicking update, the down caret does expand. Clicking the input field will also expand. They both work.

After clicking update, the down caret does expand. Clicking the input field does NOT expand. Only the caret works.

This is exactly what I am doing to recreate:

1. Run with JS
2. Show All and Collapse All work as does clicking App Type, Status or Service Manager.
3. Click Update, data loads, table redrawn, panes rebuilt, in collapsed state as expected.
4. Clicking App Type, Status, Users or Service Manager input field does NOT expand the pane.
5. Click Show All - works.
6. Click Collapse All - works.
7. Now the App Type, Status, Users or Service Manager input fields can be clicked and will expand as expected.

I'm using Chrome 116.0.5845.97 and Edge 115.0.1901.203 on Windows 10.

colin

Ah yep, got it, I missed the bit about the input element getting focus. To be clear, this is how to reproduce:

1. Run with JS
2. Click into the App Type pane input element - expands as expected
3. Collapse App Type pane
4. Click Update - data loaded as expected
5. Click into the App Type pane input element - does not expand as expected

I've raised it internally (DD-2684 for my reference) and we'll report back here when there's an update.

Colin

glimpsed_chaos

@Colin, can you tell in that same link if it is possible to "force" show the pane for Users? The other 3 load before you click the update button.

If I don't use the render, it appears. When I have the render in place, which is needed, it does not appear.

            { data: "Users",
                render: {
                    _: '[</br>].FullName',
                    sp: '[].FullName'
                },
                searchPanes: {
                    orthogonal: 'sp'
                }
            },

colin

It's an effect of having the definitions of both columns and columnDefs together - you only need one, and for you, because of the named columns you could move all the columnDefs options into columns. Doing that with columns.searchPanes.shows does display the Users column as required : https://live.datatables.net/tuwabime/7/edit

Colin

glimpsed_chaos

@Colin That is just awesome! I really appreciate the time to show that.