keyboard selection and forms

[dalf]

keyboard selection and forms

[baptistedonaux]

@dalf Are you sure that the form is really sent because if I see the last released source code, I can see a preventDefault call.

• https://github.com/autocompletejs/autocomplete.js/blob/v2.4.0/src/autocomplete.ts#L155
• https://github.com/autocompletejs/autocomplete.js/blob/v2.4.0/src/autocomplete.ts#L170

I can't reproduce the same fail. Do you have others informations to reproduce the issue ?

[ezkimo]

I have the same issue with HTML5 forms with validation constraints. Reproducable on current versions of Microsoft Edge, Mozilla Firefox and Google Chrome browsers. Safari was not tested.

AutoComplete( { ... }, 'input[name="zipcode"]' );

No special options where set. Just a url for the request and a limit. When iterating through the results with the up and down keys and then pressing enter, to select an item, the form triggers the invalid event. If all elements are valid the form submits. The _Select method is not executed.

After a deep dive into the code I found out, that the default keyboard mapping KeyUpAndDown_down ist triggered before Enter. So Enter never gets fired, because the key code 13 is not set in the conditions of KeyUpAndDown_down.

A small hotfix for this issue to get it working correctly.

var mapping = Object.assign(AutoComplete.defaults.KeyboardMappings, {
    'KeyUpAndDown_down' : {
        Conditions : [
            {
                Is : 38,
                Not : false
            },
            {
                Is : 40,
                Not : false
            },
            {
                Is : 13,
                Not : false
            }
        ],
        Callback : function(event) {
            event.preventDefault();
        },
        Operator : 1,
        Event : 0
    }
});
AutoComplete(
    {
        KeyboardMappings : mapping
    },
    'input[name="zipcode"]'
);

Now you can iterate through the results with the up and down keys and select an item with enter.

[dalf]

I've just made a quick example : https://github.com/dalf/autocomple-test

[baptistedonaux]

This issue has been resolve into 2.6.3. Sorry for the response time !