Wait for event handlers to be set up

Fixes flaky specs where clicking happened too fast

app/assets/javascripts/search_autocomplete.js

@@ -95,10 +95,10 @@ export class SearchAutocomplete {
       this.createAutocomplete();
     }
 
-    this.searchInput.addClass('disabled');
     this.saveTextLength();
     this.bindEvents();
     this.dropdownToggle.dropdown();
+    this.searchInput.addClass('js-autocomplete-disabled');
   }
 
   // Finds an element inside wrapper element
@@ -338,7 +338,7 @@ export class SearchAutocomplete {
     if (!this.dropdown.hasClass('show')) {
       this.loadingSuggestions = false;
       this.dropdownToggle.dropdown('toggle');
-      return this.searchInput.removeClass('disabled');
+      return this.searchInput.removeClass('js-autocomplete-disabled');
     }
   }
 
@@ -432,8 +432,8 @@ export class SearchAutocomplete {
   }
 
   disableAutocomplete() {
-    if (!this.searchInput.hasClass('disabled') && this.dropdown.hasClass('show')) {
-      this.searchInput.addClass('disabled');
+    if (!this.searchInput.hasClass('js-autocomplete-disabled') && this.dropdown.hasClass('show')) {
+      this.searchInput.addClass('js-autocomplete-disabled');
       this.dropdown.removeClass('show').trigger('hidden.bs.dropdown');
       this.restoreMenu();
     }

doc/development/testing_guide/flaky_tests.md

@@ -83,6 +83,7 @@ This was originally implemented in: <https://gitlab.com/gitlab-org/gitlab-foss/m
 - In JS tests, shifting elements can cause Capybara to misclick when the element moves at the exact time Capybara sends the click
   - [Dropdowns rendering upward or downward due to window size and scroll position](https://gitlab.com/gitlab-org/gitlab/merge_requests/17660)
   - [Lazy loaded images can cause Capybara to misclick](https://gitlab.com/gitlab-org/gitlab/merge_requests/18713)
+- [Triggering JS events before the event handlers are set up](https://gitlab.com/gitlab-org/gitlab/merge_requests/18742)
 
 #### Capybara viewport size related issues
 

spec/features/search/user_uses_header_search_field_spec.rb

@@ -28,8 +28,7 @@ describe 'User uses header search field', :js do
 
     context 'when clicking the search field' do
       before do
-        page.find('#search').click
-        wait_for_all_requests
+        page.find('#search.js-autocomplete-disabled').click
       end
 
       it 'shows category search dropdown' do