SearchBuilder input causes unintended interaction in SharePoint 2016

Hon3yNutz

Ok so this is nearly impossible to identify with code. So I am going to verbalize the interaction bug...

In the SearchBuilder, when a user selects searchbuilder it opens a modal -- the user enters into the search criteria, selects contains, and writes in their input-- everything works as expected -- unless they press they 'enter' key. If a user presses the enter key the SharePoint Instance reloads into the editor page

I have experienced this issues previously with buttons not having type='button' ... so when SharePoint reads the form it sees the lack of type indicator and defaults to the button type being a submit button, and causes a full reload of the page (in before sharepoint is trash comment)

I have attempted to use specific javascript to ignore enters as follows but it doesnt work (i have also put it on multiple other classes within the datatable modal but it wont work -- are their any options to disable enter within searchbuilder directly?

( 'dt-button-collection' ).on( 'keypress keydown keyup', function(e) {
            var keyCode = e.keyCode || e.which;
            if (keyCode === 13) {
                e.preventDefault();
                return false;
            }
});

My SearchBuilder code is as follows

buttons:[
   {
      extend: 'searchBuilder',
      config: {
         depthLimit: 1,
         clearall: null,
         columns: [2,3,4,5,6,7],
         conditions: {
            array:{
               'without': {  conditionName: "Does Not Contain"},
               '=' : null,
               '!=' : null,
               '!null' : {  conditionName: "Is Not Empty"},
               'null' :  {  conditionName: "is Empty"}
           },
            string:{
               '!contains': null,
               'starts' : null,
               'ends' : null,
               '!starts' : null,
               '!ends': null,
               '!=': null,
               '!null' : {  conditionName: "Is Not Empty"},
               'null' :  {  conditionName: "is Empty"}
           },
            date:{
               '!between': null,
               '=' : null,
               '!=' : null,
               '!null' : {  conditionName: "Is Not Empty"},
               'null' :  {  conditionName: "is Empty"}
           }
       }
    }
}]

Hon3yNutz

Upon further investigation, I believe this is 100% a product of SharePoint. So I am withdrawing my question. The issue seems to be resolved by loading on /Pages (web part pages) vs /SitePages (which essentially operate under a wiki type page). I still need to do some additional testing but this seems to resolve the issue.

colin

Glad you were able to resolve it, thanks for posting back,

Colin

JLH999

Hang on a minute ... I have run into just this issue today while doing additional testing.

Similar situation with SearchBuilder being deployed in SharePoint save there are no modals opening up.

True there is a difference between pages being deployed in SharePoint from the /Page vs. /SitePages folder(s) ... however ... I think there is a more fundamental issue as the SearchBuilder > contains input field is being interpreted as a button.

The standard DataTables Search Input Field (usually upper right corner) does not react to the Enter key (ignores it ... stops propagation?) whereby the SearchBuilder > contains input field processes the Enter Key as button if the enter key is pressed ????

Inside the code, how is the SearchBuilder > contains input field handling the Enter Key vs the standard DataTables Search input field?

allan

We'd really need a link to a page showing the issue to be able to help debug it.

Is your table inside a <form> element perhaps?

Allan