Submitting search form (mini) with enter key fires event handlers bound by jquery twice

[koenner01]

When submitting the search form in the header with the enter key on the keyboard, event handlers that were bound to the form submit (through jQuery) are fired twice.

Preconditions

1. PHP 7.0
2. CE 2.2 (also tested 2.1.11)

Steps to reproduce

1. Create a javascript which adds an event handler to the form submit

$('#search_mini_form').on('submit', function(e) {
    console.log('listening for form submit');
});

2. Submit the search form in the header with a value by pressing the enter button

Expected result

1. Our created listener is only fired once

Actual result

1. Listener is fired twice

In module-search/view/frontend/web/form-mini.js the _onKeyDown function is adding a trigger to the enter key

case $.ui.keyCode.ENTER:
    this.searchForm.trigger('submit');
    break;

This trigger is causing the submit event to be fired twice

[koenner01]

workaround can be to use the vanilla javascript addEventListener functionality

[magento-engcom-team]

@koenner01, thank you for your report.
We've acknowledged the issue and added to our backlog.

[amjadm61]

I'm working on it at #dmcdindia

[magento-engcom-team]

@amjadm61 thank you for joining. Please accept team invitation here and self-assign the issue.

[sidolov]

Hi @koenner01. Thank you for your report.
The issue has been fixed in #15340 by @amjadm61 in 2.2-develop branch
Related commit(s):

• 153faa6e823e0aa4baa5400503ed8bc993c0c9f8

The fix will be available with the upcoming 2.2.5 release.