Enter button not submitting with select2 and X-editable

Question

I am using X-Editable and select2 with Rails, and while I was able to implement select2 successfully, I am no longer able to hit the Enter button to submit the change.

This is how it looked when I was using select

<%= editable model, :status, type: :select, data: { source: [...] } %>

Here, I am able to perform my selection from the dropdown and hit Enter, and it would submit the change.

However, when I updated to using select2

<%= editable model, :status, type: :select2, data: { source: [...] } %>

The dropdown works perfectly, the search works perfectly, but hitting Enter on the keyboard no longer submits the change, I now have to use my mouse to click the blue checkmark button next to it in order to submit the change.

I need to fix it so that hitting the Enter button performs the submit action like it did using select. I tried to trigger an alert to see if I could find the enter action but to no avail using the code below:

$('select2-search-field > input.select2-input').on('keyup', function(e)     
 {
    if(e.keyCode === 13)
    alert("Hello");
 });

Update

I think the main reason it's not working is because of the search field. The enter key has been allocated to select an option from the dropdown search field, which is why it's not submitting. Is there any way I could re-map after an option has been selected from the dropdown, so that the first time you hit enter, it selects the correct option from the dropdown, then the second time you hit enter it submits?

Answer 1

Try keypress event:

$('select2-search-field > input.select2-input').on('keypress', function(e)     
 {
  if(e.keyCode === 13)
  alert("Hello");
 });