Editor Select2 Field Type Issues

mccwebdev

Hello,

I have some editor tables setup using the select2 field type.

var searchdegrees = new $.fn.dataTable.Editor({
            ajax: {
                url: '{{ route("search.degreetype.index", [Route::current()->parameters()["search"]]) }}',
            },
            table: '#search-degree-types',
            },
            fields: [
                {   label: 'Degree Type', 
                    name: 'degree_type_id',
                    type:  'select2',
                    options: <?php echo $degree_types; ?>
                },
                { label: 'Display', name: 'display_order' },
            ],
            i18n: {
                create: {
                    button: 'Add',
                    title:  '<h4>Add Degree Type</h4>',
                    submit: 'Add'
                },
                remove: {
                    button: 'Delete',
                    title:  '<h4>Delete Degree Type</h4>',
                    submit: 'Delete',
                    confirm: {
                        _: "Are you sure you want to delete %d degree types?",
                        1: "Are you sure you want to delete this degree type?"
                    }
                }
            }
        });

        searchdegrees
            .on('postCreate postRemove', function () {
                // After create or edit, a number of other rows might have been effected -
                // so we need to reload the table, keeping the paging in the current position
                // table.ajax.reload( null, false );
                $('#search-degree-types').DataTable().ajax.reload();
            })
            .on('initCreate', function () {
                // Enable order for create
                searchdegrees.field('display_order').enable();
            })
            .on('initEdit', function () {
                // Disable for edit (re-ordering is performed by click and drag)
                searchdegrees.field('display_order').disable();
            });

        var searchdegrees_table = $('#search-degree-types').DataTable(
        {
            paging: false,
            searching: false,
            select: true,
            order: [1, 'asc'],
            ajax: {
                url: '{{ route("search.degreetype.index", [Route::current()->parameters()["search"]]) }}',
            },
            columns: [
                // { title: 'ID', data: 'id', visible: false },
                {   title: 'Degree Type', 
                    data: 'degree_type_id',
                    render: function(data) {
                        var obj = <?php echo $degree_types_display; ?>;
                        return obj[data];
                    }
                },
                { title: 'Display Order', data: 'display_order', className: 'reorder' },
            ],
            rowReorder: {
                selector: '.reorder',
                dataSrc: 'display_order',
                editor:  searchdegrees
            },
        });

        // Display the buttons
        new $.fn.dataTable.Buttons( searchdegrees_table, [
            {   extend: "create", 
                text: '<i class="btn btn-default btn-xs glyphicon glyphicon-plus"></i>', 
                editor: searchdegrees,
                formButtons: [
                    {
                        label: 'Save',
                        fn: function () { 
                            var that = this;
                            this.submit( function () {
                              that.create();
                            });
                        }
                    }, 
                    {
                        label: 'Close',
                        fn: function () { this.close(); }
                    }
                ]
            },
            { extend: "remove", text: '<i class="btn btn-default btn-xs glyphicon glyphicon-trash"></i>', editor: searchdegrees }
        ] );

        $('#degree-type-panel-toolbar').append(searchdegrees_table.buttons().container());

All is working great with the exception of two issues.

1. When you go to add a new record the select2 dropdown automatically opens. Not the end of the world, but would be nice to have it default to closed if needed.

2. Critical issue is that when I select a row and click the delete button, the delete modal appears which is all good, but for some reason the select2 dropdown appears in the upper left corner of the browser.

One side note: if I change the select2 field type to a standard select the strange select2 popup in the upper left does not appear when attempting to delete a record.

Screenshots attached. Any insight, especially into item #2 would be much apprecitated. Thanks!

kthorngren

I'm using Editor 1.6.1 and Bootstrap and don't see either of those issues. I'm not loading the options during initialization but with the JSON returned from the server. Here is my typical select2 config:

            { type: 'select2', label: 'Device Types:', name: 'main.fk_types_list[]',
                                opts: { multiple: true,
                            placeholder: 'Select Device Types' }
            },

Wonder if the problem is with setting the options this way.

Kevin

allan

If you aren't already, could you try the Editor / Select2 integration from here. It might be that you are using the CDN version which I think is currently a step or two behind.

Failing that, can you link to a test case showing the issue please?

Allan

mccwebdev

Thanks. I'm not using a CDN. I have it working in other areas without issue. This area has multiple datatables/editors using select2 in one ui, along with the changes to the form button processing to keep the windows open until closed. I will try to remove each of these to see if one may be the culprit.

mccwebdev

Ok, I was able to strip this down to the bare-bones and think I've found the culprit.

In my current scenario, I am using a select2 dropdown as the first element in the editor modal, followed by a display order field. When you click the add button it opens the modal and automatically opens the select2 dropdown, which is not ideal. When I select a record and click delete, it opens the modal, but also opens that weird display of the select in the top left of the controller.

If I switch the order and make the display order text box the first item in the editor modal, not the select2 dropdown, the dropdown does not automatically open, and if I select a record and click delete it does not open that weird select display in the top left when the delete modal opens.

Any thoughts on how to resolve this other than switching the order of the elements?

Thanks

allan

[It doesn't look like[(https://select2.github.io/options.html) Select2 has an option to not open the drop down when the element is focused on, so you would probably need to have it either not focus on the element, or focus on a different one. The focus in Editor can be controlled by the form-options object - specifically the focus parameter.

Allan

mccwebdev

Hi Allan,

The link you provided didn't work, but I found the information I needed here:
https://editor.datatables.net/reference/option/formOptions.main

Basically, I added this to the editor instance and that resolved this crazy little issue. Thanks for your help!

formOptions: {
                main: {
                    onComplete: 'none',
                    focus: null
                }
            },

allan

That I think should be all you need. If you set focus to be 1, does it focus on the second field rather than the first?

Allan

mccwebdev

Yes, but I'd rather have it default to neither element focused for the user in this case.