Backspace key disabled after typing anything in the filter box

PhilOwens

We are using Bootstrap3 - When I type something in the filter text box I can not delete it using the backspace key. I can highlight it, or move the cursor using the arrow keys and press the Delete button, but the backspace key does nothing.
Any ideas? I have shown the references we are using and the table code:

    <link href="https://cdn.datatables.net/v/bs4-4.1.1/jq-3.3.1/jszip-2.5.0/dt-1.10.20/b-1.6.1/b-html5-1.6.1/sl-1.3.1/datatables.min.css" rel="stylesheet" type="text/css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.36/pdfmake.min.js" type="text/javascript"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.36/vfs_fonts.js" type="text/javascript"></script>
    <script src="https://cdn.datatables.net/v/bs4-4.1.1/jq-3.3.1/jszip-2.5.0/dt-1.10.20/b-1.6.1/b-html5-1.6.1/sl-1.3.1/datatables.min.js" type="text/javascript"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment-with-locales.min.js" type="text/javascript"></script>
    <script src="ClientGlobalContext.js.aspx" type="text/javascript"></script>

Table Code

var newTable = $('#entityTable').DataTable({
                    "data": resultArray,
                    "pageLength": 50,
                    "dom": 'Blfrtip',
                    "buttons": [
                        {
                            extend: 'pdfHtml5',
                            exportOptions: {
                                columns: [ 2, 3, 4, 5, 6 ]
                            }
                            },
                                                {
                            extend: 'excelHtml5',
                            exportOptions: {
                                columns: [ 2, 3, 4, 5, 6 ]
                            }
                        }
                    ],
                    "order": [[2, "desc"]],
                    "columns": [
                        {data: 'logicalname', "visible": false},
                        {data: 'entityid', "visible": false},
                        {data: 'actualEnd',
                        
                        render: function(data, type, row){    
                            var displayDate = '';
                            if(data.length > 10){
                                displayDate = moment(data, "DD/MM/YYYY HH:mm").format("YYYY-MM-DD HH:mm");                                
                            }
                            else{
                                displayDate = moment(data, "DD/MM/YYYY HH:mm").format("YYYY-MM-DD");
                            }  


                            if(displayDate.toLowerCase() == 'invalid date'){
                                return '';
                            }
                            else{
                                return displayDate;
                            }                            
                        }
                        
                        },
                        {data: 'createdby'},
                        {data: 'activityType'},
                        {data: 'displayname'},
                        {data: 'statuscode'},
                        {
                            data: 'entityid', 
                            render: function (data, type, row) {
                                if (data) {
                                    return "<a href='#' class='viewrecord'>Open</a>";
                                } else {
                                    return '';
                                }
                            }
                        }
                    ],
                    "columnDefs": [
                        {
                            "targets": 2,                            
                            width: "160px"
                        }
                    ]
                    
                });         

kthorngren

Looks like you are loading Bootstrap 4 with the compiled Datatables includes. This [Bootstrap 4[(https://datatables.net/examples/styling/bootstrap4.html) example seems to work correctly with search input. The problem seems to be specific to your page. Please post a link to your page or a test case replicating the problem so we can take a look.
https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

Kevin

jklosinski

For anyone else that is also building a web resource for D365 and having this problem...it's because of ClientGlobalContext.js.aspx which does things like disable the context menu and for some reason it is preventing backspace from working on the search field.

Here's workaround that prevents the keydown event from bubbling up to the offending script:
$('input[type="search"]').on('keydown', (e) => e.stopPropagation());

If you are loading your web resource on a form, you should also be able to skip loading ClientGlobalContext and access Xrm via parent.Xrm. But if you are loading a web resource in a dashboard, you are stuck with ClientGlobalContext until they provide the alternative (which supposedly is in the near future [it is deprecated]).