select can't input in search box with 6 field after validation error

cyron · March 2016

using select2 plugin with editor.
when the field is over 5,say 6,
and let editor validation fail by input nothing,
then the select2's search box can't be inputed.
I think it maybe the z-index issue, but can't resolve it.

allan · March 2016

Are you able to link to the page showing the issue so I can debug it problem please.

Thanks,
Allan

cyron · March 2016

i don't have online version, but the simple sample is like below.
if you delete the name5, select2 works fine.

<html>
    <head>
        <meta charset="utf-8" />
        <link href="css/bootstrap.min.css" rel="stylesheet" />
        <link href="css/jquery.dataTables.min.css" rel="stylesheet" />
        <link href="css/dataTables.bootstrap.min.css" rel="stylesheet" />
        <link href="css/editor.dataTables.min.css" rel="stylesheet" />
        <link href="css/editor.bootstrap.min.css" rel="stylesheet" />
        <link href="css/buttons.dataTables.min.css" rel="stylesheet" />
        <link href="css/buttons.bootstrap.min.css" rel="stylesheet" />
        <link href="css/select.dataTables.min.css" rel="stylesheet" />
        <link href="css/select.bootstrap.min.css" rel="stylesheet" />
        <link href="css/select2.min.css" rel="stylesheet" />
        <link href="css/select2-bootstrap.min.css" rel="stylesheet" />
    </head>
    <body>
        <div class="row">
            <div class="col-lg-12">
                <div class="panel panel-default">
                    <div class="panel-body">
                        <div class="dataTable_wrapper">
                            <table class="table table-striped table-bordered table-hover" id="dataTables">
                                <thead>
                                    <tr>
                                        <th>id</th>
                                        <th>name1</th>
                                        <th>name2</th>
                                        <th>name3</th>
                                        <th>name4</th>
                                        <th>name5</th>
                                    </tr>
                                </thead>
                             </table>
                         </div>
                    </div>
                </div>
            </div>
        </div>

        <script src="js/jquery.min.js" type="text/javascript"></script>
        <script src="js/bootstrap.min.js" type="text/javascript"></script>
        <script src="js/jquery.dataTables.min.js" type="text/javascript"></script>
        <script src="js/dataTables.bootstrap.min.js" type="text/javascript"></script>
        <script src="js/dataTables.editor.min.js" type="text/javascript"></script>
        <script src="js/editor.bootstrap.min.js" type="text/javascript"></script>
        <script src="js/dataTables.buttons.min.js" type="text/javascript"></script>
        <script src="js/buttons.bootstrap.min.js" type="text/javascript"></script>
        <script src="js/dataTables.select.min.js" type="text/javascript"></script>
        <script src="js/select2.min.js" type="text/javascript"></script>
        <script src="js/editor.select2.js" type="text/javascript"></script>

        <script type="text/javascript">

        $(document).ready(function() {
            var editor = new $.fn.dataTable.Editor({
                table: "#dataTables",
                idSrc: 'id',
                ajax: function(method, url, d, successCallback, errorCallback) {
                    var output = {data: []};
                    
                    if (d.action !== 'remove') {
                        $.each(d.data, function(index, value) {
                            output.data.push(value);
                        });
                    }
         
                    successCallback(output);
                },
                fields: [
                    {
                        label: "id:",
                        name: "id",
                        type: "select2",
                        opts: {
                            theme: 'bootstrap',
                            data: [{id: 1, text: 'demo1'},{id: 2, text: 'demo2'},{id: 3, text: 'demo3'}],
                            minimumInputLength: 1
                        }
                    }, {
                        label: "name1:",
                        name: "name1"
                    }, {
                        label: "name2:",
                        name: "name2"
                    }, {
                        label: "name3:",
                        name: "name3"
                    }, {
                        label: "name4:",
                        name: "name4"
                    }, {
                        label: "name5:",
                        name: "name5"
                    }
                ]
            });

            var table = $('#dataTables').DataTable({
                serverSide: false,
                ordering: false,
                dom: "Brt",
                select: {
                    style: 'single'
                },
                ajax: null,
                columns: [
                    {"data": "id"},
                    {"data": "name1"},
                    {"data": "name2"},
                    {"data": "name3"},
                    {"data": "name4"},
                    {"data": "name5"}
                ],
                buttons: [
                    { extend: "create", editor: editor },
                    { extend: "edit", editor: editor },
                    { extend: "remove", editor: editor }
                ]
            });

            editor.on('preSubmit', function (e, o, action) {
                if (action !== 'remove') {
                    console.log(editor.inError());
                    var name1Field = editor.field('name1');
                    if (!$.trim(name1Field.val())) {
                        name1Field.error('required!');
                    }
                    if (editor.inError(['name1'])) {
                        return false;
                    }
                }
            });
        });
        </script>
        
    </body>
</html>

allan · March 2016

I had to add {id: '', text: ''}, to the options list to be able to get the field into the error state (otherwise Select2 wouldn't let me have no item selected), but once I'd done that and attempt to submit the form, with the error message showing for that field, I had no problem clicking the input and being able to then input something else.

Are there any errors shown in the console? I presume you can see the search box before the error? If so, that would suggest that it isn't a z-index issue.

Allan

cyron · March 2016

Thanks for your testing.
I figured it out why the problem can't be reproduced.
I am always using firefox to test the app, and the problem appeared.
when I use chrome or ie, everything is ok.
and the demo has slight differt problem between my real app,
it need not to cause validation error, select2 can't be inputed at all.
and the app's problem is, when fields other than select2 has validation error,
select2 can't be inputed.
but I think it maybe the same issue.

select can't input in search box with 6 field after validation error

select can't input in search box with 6 field after validation error

Answers

Howdy, Stranger!

Categories

DataTables

select can't input in search box with 6 field after validation error

select can't input in search box with 6 field after validation error

Answers

Howdy, Stranger!

Quick Links

Categories

DataTables