Arrow Keys Not Working on Form

Question

We're using Ninja Forms on a particular site and whenever we type something on it, the arrow keys just do not work. I did a research and found something similar presented to this community (here).

So I did check the JS files of the site and found exactly what was mentioned. I noticed this set of codes which I think is responsible for disabling the arrow keys:

    // disable/enable scroll (mousewheel and keys) from https://stackoverflow.com/a/4770179                  
    // left: 37, up: 38, right: 39, down: 40,
    // spacebar: 32, pageup: 33, pagedown: 34, end: 35, home: 36
    var keys = [37, 38, 39, 40], wheelIter = 0;

    function preventDefault(e) {
        e = e || window.event;
        if (e.preventDefault)
        e.preventDefault();
        e.returnValue = false;  
    }

    function keydown(e) {
        for (var i = keys.length; i--;) {
            if (e.keyCode === keys[i]) {
                preventDefault(e);
                return;
            }
        }
    }

But I'm not sure what to do next since that resource I initially mentioned did not state the step-by-step procedure. Should I remove the entire set of codes? I definitely can do a test but I'm thinking I might be led to think that it worked when there's actually some other changes that I may fail to notice.

Will appreciate guidance from the community. Thanks.

I probably should provide a link to the actual form. Here you go.

Answer 1

You could check if the target is a form element using jQuery (since you're using it), and if so not call the nasty code that blocks default behavior.

function keydown(e) {
    // Don't block arrow keys on form elements
    if( $(e.target).is(':input') ) {
        return;
    }
    for (var i = keys.length; i--;) {
        if (e.keyCode === keys[i]) {
            preventDefault(e);
            return;
        }
    }
}