selectize render problems in bubble edit, called on 'draw.dt'

TieKei

Hey there,
I'm stuck at the following problem:

after adding a new row to my DataTable, I want to show the selectize dropdown within a bubble-edit for my first field.
Doing this manually works as expected (clicking the first field brings up a bubble with a working selectize dropdown). However I fail to script this.

My current approach to achieve this is to trigger the click event for my cell after the new row is created and draw is called.

$('#article-table').one( 'draw.dt', function () {
    // find 2nd field of last row, click it
    $("#article-table").find("tbody tr:last-child td:eq(1)").trigger('click');
});

this calls the click-event-handler for my table which calls bubble on my editor:

$('#article-table').on('click', 'tbody td:not(:last-child)', function () {
         switch($(this).index()) {
            // ...
            case 1:
                articleEditor.bubble(this, ['articleid'], {title: 'Artikel:', width: "500px", focus: null});
                break;
           // ...
        }
}

While this indeed brings up the modal, the focus: null option for bubble is ignored therefore the dropdown get's focus.
This wouldn't be too bad if selectizes dropdown items were rendered properly (since I'm using a rather complex render function for selectize items, I'd guess they aren't ready yet).

Mind that this works perfectly, when the user clicks manually inside the table-cell.

I'm not sure how to address this issue, since I can't find any events that are fired after the bubble is rendered. Also I don't get why the focus: null option is ignored while the other ones (e.g. title: 'Artikel:') are working.

maybe relevant: I'm using bootstrap

Thanks!
Tim

allan

Also I don't get why the focus: null option is ignored while the other ones

That's odd - it should work! I've just tried a little experiment on this page.

In the console run:

setTimeout( function () {
  editor.bubble( $('tbody td:eq(1)'), { focus: null } );
}, 2000 );

The setTimeout is to give time to click back into the document so focus is not with the console but in the browser window. If you do the same without the focus: null it will focus as expected.

The Bootstrap example shows similar behaviour, although the bubble editing display is incorrect as the correct CSS is not being included (fixed in the upcoming 1.5 release!).

Are you able to link to your page? What you describe should work as far as I can see.

Thanks,
Allan

TieKei

finally I had the time to create a minimal example of my problem:

https://tim-kraemer.de/projects/dte-test/?PageSpeed=off

if you click manually inside the "article" field everything is correct (the items of selectize are rendered properly).

But if you click the + Button on the right, it will fake create a new row (functionality is stripped in this example) and "clicks" the article-field automatically - now it's not rendered correctly anymore (Chrome and Firefox show different results, but both are broken).

Any ideas on that?

allan

hi,

It doesn't look like it has anything to do with the reloading of the table, but rather is all to do with the synthetic click event. Just running $("#article-table").find("tbody tr:last-child td:eq(1)").trigger('click'); on the page (without any reload) will also cause the issue.

I've just tried to reproduce the issue locally, but frustratingly have been unable to do so. It looks like the issue is with the selectize element gaining focus immediately (possibly before the bubble has been shown, which is causing the issue). I don't see why that is happening with your example and not my own though.

I'll get back to you when I've had more of a change to look into it.

Allan

TieKei

interesting... if I create a button, which does the same, it seems to work:

<button id="button">click me</button>

// ...

$("#button").on('click', function() {
    $("#article-table").find("tbody tr:last-child td:eq(1)").trigger('click');
}); 

I minified my example a little bit further and removed bubble-edit, which doesn't change the outcome:
https://tim-kraemer.de/projects/dte-test2/?PageSpeed=off

This had my curiosity, now it has my attention ;)

allan

I'm still not entirely sure what is going wrong here. It appears that the selectize control is gaining focus before it is made visible - that means that it can't resize correctly.

Why it is gaining focus before it is made visible, I'm not at all sure.

You can add:

        this.on( 'open', function () {
            setTimeout( function () {
                conf._selectize.blur();
            }, 0 );
        } );

To the create function in the Editor plug-in for selectize will will hide the control and mask the issue.

But it still shouldn't be getting focused at that point...

Allan