In Bootstrap 2.3.2, when there is multiple dropdown element and when the key pressed is enter, it is not showing the right dropdown

Question

When I press "ENTER" in the textbox, the dropdown menu that is shown is the first one. It should be the dropdown menu related to the textbox. I'm using Bootstrap 2.3.2.

Is there anyway to fix this behavior?

See the codepen for an example: http://codepen.io/anon/pen/irCsF

This is how I fixed my problem.

    var $this = $(this);

    $this.find('input').bind('keypress', function(event)
    {
       if(event.keyCode == 13)
        {
            if($this.find('.btn-group button.dropdown-toggle').length > 0)
            {
                event.preventDefault();
                $this.find('.btn-group button.dropdown-toggle').click();
            }
        }
    });

Answer 1

the problem is with the button tag when you hit enter button event fire change the button tag to span your problem will be solved

http://codepen.io/anon/pen/Kmnzq