How to disable double click on multi-select fields in SharePoint edit form?

Question

SharePoint presents multi-select fields as below image.

We have attached custom click events to "Add >" and "< Remove" buttons which perform some operations. But there is a double click event attached on the select (for both left and right) which moves elements to the other select. We need to disable that double click event so that user only uses "Add >" and "< Remove" buttons.

I am unable to find a way to disable it. I have tried using jQuery's unbind, off, but nothing seems to work. How can we remove the double click event from these select fields?

Answer 1

There is no (easy) way to remove an anonymous event handler from element. But what you can do is to add your own event handler before SharePoint attaches its event handler. Now in your event handler you can stop the propagation so that SharePoint's event handler doesn't get executed.

Create JavaScript file and add your OnPostRender method. Inside the method identify the control for which you need to stop ondblclick event. Once identified, attach your own ondblclick event and call e.stopImmediatePropagation() to stop calling the SharePoint's ondblclick event.

Add the JavaScript file to the New/Edit form webpart of your list/document library.

(function() {
    var myContext = {};
    myContext.OnPostRender = myPostRender; // Create your post ender method
    myContext.Templates = {};
    SPClientTemplates.TemplateManager.RegisterTemplateOverrides(myContext);
})();

function myOnPostRender(ctx) {
    // Identify multilist control
    if (ctx.ListSchema.Field[0].FieldType == "LookupMulti" && ctx.ListSchema.Field[0].AllowMultipleValues == true) { 
        // Attach your double click event on left select
        $('#' + ctx.ListSchema.Field[0].Name + "_" + ctx.ListSchema.Field[0].Id + "_SelectCandidate").on('dblclick', function(e) {
            e.preventDefault();
            e.stopPropagation();
            e.stopImmediatePropagation(); // Stop event propogation to SharePoint's double click event
        });
        // Attach your double click event on right select
        $('#' + ctx.ListSchema.Field[0].Name + "_" + ctx.ListSchema.Field[0].Id + "_SelectResult").on('dblclick', function(e) {
            e.preventDefault();
            e.stopPropagation();
            e.stopImmediatePropagation(); // Stop event propogation to SharePoint's double click event
        });
    }
}