Weird behavior with custom extenders

[larivierec]

Hello,

I have been using this keyboard for the past month and i've been having trouble understanding why the same code works in Debug and in normal "Release" mode it doesnt work.

Here is the snippet:

$.extend($.keyboard.keyaction, {

    enter: function(base,e){
        if (base.el.tagName === "INPUT") {
            if(base.el.id == "txtBoxAdminPass")
            {
                //$('#passbtn_click').click();
                base.accept();

                if (adminCheckPassword($('#txtBoxAdminPass').val()))
                {
                    setAdminMode(true);
                    $('#dialogPassword').dialog( "close" );
                }
                else
                {
                    alert("Invalid Password");
                }
                txtBoxAdminPass.value = "";
            }
        }
    }

what happens is that if I use this exact code to check the password without a break point it goes right through it. If I add a breakpoint to this exact code, anywhere, it works... i'm not quite sure why.

Any guidance would be accepted... Also take note that they're no overwriting of the enter other than this location.

This is contained in a dialog with options as follows:

$( "#dialogPassword" ).dialog({
    autoOpen: false,
    modal: true,
    width: 450,
    height:200,
    enterNavigation:false,
    buttons: [
    {

        text: translate("ok_trans"),
        click: function() {
            var txtBoxAdminPass = document.getElementById("txtBoxAdminPass");
            if (adminCheckPassword(txtBoxAdminPass.value))
            {
                setAdminMode(true);
                $(this).dialog( "close" );
            }
            else
            {
                alert("Invalid Password");
            }
            txtBoxAdminPass.value = "";
        },
        id:'passbtn_click'
    },
    {
        text: translate("cancel_trans"),
        click: function() { $(this).dialog('close'); txtBoxAdminPass.value = "";}
    }]
});

and a text field with options:

$('#txtBoxAdminPass').keyboard({
    openOn: null,
    usePreview : false,
    maxLength : 12,
    autoAccept: true,
    enterNavigation:true
});

[Mottie]

Hi @larivierec!

If you look at the accept keyaction function, you'll see that it has a return false at the end. When a keyaction doesn't return false, the event continues to be processed... positioning the caret, checking for combination keys, and triggering a change event/callback. Essentially it acts as if the keyboard is to remain open.

So, after you call a base.accept();, add a return false immediately after it.

I'm not quite sure why the dialog initialization code has a enterNavigation option set to false in there, but it shouldn't be required. The keyboard plugin does have that option, but set to true. It won't work because of the change to the enter keyaction code. The default code includes a check for the enterNavigation option and calls the base.switchInput function, so you can copy that block over to the updated enter keyaction if you so desire.

Hopefully that will get things working as expected. If not, you can modify this demo I put together to show the issue that is occurring: http://jsfiddle.net/Mottie/egb3a1sk/134/

[larivierec]

Hello again, yes you are right concerning the enternavigation... ill take those off in the morning however, the base.accept() part is still weird. This function already has a return false; why would I have to add another one if it's already contained in it's function... secondly, i stated that this code that i had posted works with a Breakpoint and doesn't work without one.

[Mottie]

If you look at line 663 you'll see that a false needs to be returned from within the keyaction function to stop further processing.

I can't tell exactly what is happening just from looking at the code... is the dialog ok button being used to validate the input, or the keyaction code for enter supposed to do that?

Have you looked into using the validate callback function? Here is an updated version of the demo I shared above with a validate function - it prevents the user from clicking accept when the password is invalid. I don't see why the dialog would need any buttons...

If that isn't the way you want to use the keyboard, then please modify the demo so I can better understand your goal.

[larivierec]

Alright so the problem now is that if you are using a regular keyboard and I push the enter button it doesn't work. I modified the code a bit having tried the version with the accepted callback...

When I use the actual keyboard it does not enter the accepted callback function specified is this because it is not being shown at the time of pushing enter?

enter: function(base,e){
                        if (base.el.tagName === "INPUT") {
                            if(base.el.id == "txtBoxAdminPass")
                            {
                                base.accept();
                                return false;
                            }
                        }
                    },

Thanks again for your feedback,

[Mottie]

I added this to an updated demo and it appears to work for me:

$.keyboard.keyaction.enter = function(base, el){
    if (base.el.id == "txtBoxAdminPass") {
        base.accept();
        return false;
    }
};

[larivierec]

Right... I also did the same thing by adding a function and seeing if both enters worked... and it did I dont understand what is happening, anyway ill keep looking into it... Thanks

[Mottie]

So, that demo is working as you'd expect it right?

I didn't think the tagName check was necessary since you had an ID on it; but it should have worked without it. So, I'm not sure why there would be a difference unless "txtBoxAdminPass" was really a text box (as it is named) and not an input.

Oh, I did have to add this to the dialog initialization code (demo):

close: function(){
    $('#txtBoxAdminPass').getkeyboard().close();
}

because without that code, if you click the dialog box "x" to close it, the keyboard stays open.

[larivierec]

The demo worked at exactly as i'd expect, it's quite sad that the code is so similar and behaves differently

[Mottie]

I ran into an issue yesterday where I kept typing .getkeyboard() with a capital "K"... make sure to check for something minor like that too.

[larivierec]

i just noticed something, if i dont do

$("#dialogPassword").dialog("close");

[Mottie]

I'm guessing this issue has been resolved, so I'm going to close it. If you continue to have problems, please feel free to continue this discussion.

[larivierec]

no, i havent figure it out. but you can close it.
On 18 April 2015 at 21:46, Rob G [email protected] wrote:

I'm guessing this issue has been resolved, so I'm going to close it. If
you continue to have problems, please feel free to continue this discussion.

—
Reply to this email directly or view it on GitHub
#335 (comment).

[Mottie]

What was the remaining issue?

[larivierec]

its the same issue, no matter what code I put the enter key does not close
the dialog or the keyboard

[Mottie]

Can you modify one of the demos I shared to duplicate this issue. It would make it so much easier to troubleshoot the problem. Right now I'm just guessing.