select2 as first field does not show focus

louking

reference http://live.datatables.net/danosiyo/1/edit

I have a similar form in my application, with select2 as first field and date as 2nd field. I would like the first field to be focused, but don't see the easy way to do this. The calendar pop-up is a bit jarring when the form is displayed, and the user has to manually click on the first field.

I tried following suggestion in https://editor.datatables.net/reference/api/field().focus() comment to no avail. Not sure best way to put in form-options as you suggest. Shouldn't there be editor initialization option which defines focus? I think this is select2 anomaly because when I tried just type:'select' the focus defaulted to the first field as expected.

editor.on('open', function() {
    editor.field( 'position' ).focus();
});

allan

You need to add onFocus: 'focus' to your options list for the Select2 field. Although oddly that makes the jQuery UI date picker still show as well - not yet sure why that is. I need to look into that a bit more I'm afraid.

Allan

louking

Thanks for the quick response. I hope you will have time to look into this as I know how busy you must be. I'll hold off on marking the question as answered for now.

louking

Adding onFocus: 'focus' doesn't seem to help. See http://live.datatables.net/rokecopa/1/edit

The first time New or Edit is clicked, the date is focused. However, if the the modal is brought up a second time, the focus is correct.

allan

Its actually a top level option of the Select2 plug-in:

http://live.datatables.net/miqubixe/1/edit

One other thing, with Editor 1.8+ you should return or use the callback for dependent() to let Editor know that you've finished processing the data, otherwise it will show a little processing indicator for this fields (implemented in that link above).

Allan

louking

Yes this seems to work, only this is still jarring. I guess I'd rather not have any focus. I found https://datatables.net/forums/discussion/comment/107841/ which has formOptions: { main: { focus: null } }

I thought perhaps that would work, just disabling the focus, but the calendar date picker still pops up, even when using dataTables native datetime type.

See http://live.datatables.net/mosifehe/1/edit

allan

Argh - its a jQuery UI dialog thing. It will automatically try to focus on the first input element in the modal (it isn't using the Select2 since it isn't seeing that as an input...).

You can override that behaviour using:

$.ui.dialog.prototype._focusTabbable = $.noop;

http://live.datatables.net/muwoboka/1/edit

Credit to this SO thread for the solution.

Allan

louking

Thanks for that!

Just for completeness, is there a way with Editor to use the autofocus attribute trick described in the SO thread?

I tried attr option defined under https://editor.datatables.net/plug-ins/field-type/editor.select2, but unfortunately it throws an exception. See http://live.datatables.net/sebakupi/1/edit

(sorry to make this thread so long lived -- I know you're very busy)

kthorngren

Maybe try attr: {autofocus: true}, instead of attr: 'autofocus',.

http://live.datatables.net/musoxoga/1/edit

Kevin

louking

Thanks! That solves the problem of the exception being thrown. Unfortunately doesn't seem to trick jquery ui into focusing on the select2.

I'm good with the solution @allan recommended, and probably we can close this.