focusout event on alt keypress does not work as expected

Question

I am using jQuery Token Input plugin with one of my custom written plugins in one of my projects.

My plugin basically adds an anchor tag to an element that it was initialized on and upon clicking the anchor link a text input element is shown which is bound to jquery token input plugin.

On FocusOut event i want to hide the text input (in this case which would be a ul initialized by jquery token input in place of the text input).

All works fine till now.

But if I press the alt key, the main ul is hidden as expected but the dropdown ul is still visible.

To see the problem that i am facing you can also view this JSFiddle . Sorry, about the CSS part, i did include the CSS file but for some reason it does not work as expected.

Now, in the fiddle if you click the + Add button the input and the dropdown (with instructions) appears, then if you click anywhere else in the preview window, it disappears, which is what is expected behaviour.

But if you click on the add button and once the input and dropdown appears and then if you press the alt key (which initiates the focusout event) the input disappears but the dropdown still shows. Why is that ?

What could be the reason causing this ?

Update:

I apologize if I made it a little complicated. Following is comparison between the expected behavior and the problem.

Case 1: (focusout event triggered by clicking somewhere in the body).

In this case, A user clicks on the +Add button > An input box appears with an open dropdown > A user focuses out by clicking somewhere else in the body > The Input and dropdown disappears.

This is the expected behaviour.

Case 2: (focusout event triggered on alt keypress).

In this case, A user clicks on the +Add button > An input box appears with an open dropdown > A user presses the alt key which triggers the focusout event > The Input disappears but dropdown does not.

I need to make sure the dropdown disappears in this case too.

Note: The Dropdown CSS is messed up in the fiddle for some reason. The text that says type somethig is the dropdown element.

Answer 1

Add shortcut library and add the following code . It works

shortcut.add("Alt", function() {
   $('.token-input-dropdown').hide()
        });

Demo : http://jsfiddle.net/abdennour/dHSWu/5/

Likewise,be kept away the tags using margin to avoid overlapping of events

a.addInput{
    margin:2px;
}
div.token-input-dropdown{
     margin:2px;
}