Override Autocomplete.open instead of Autocomplete.onInputBlur

The original implementation inadvertently relied on a browser event
property that is only present on firefox. After looking at the original
source code in the library and some more experimentation, it looks like
we can override a different function to set the library's
`interactingWithList` variable to false when the dropdown is initially
opened. We can then rely on the `onResultsMouseDown` function to switch
that variable back to true when a result is clicked on and trigger the
proper selection behavior.

Author: masaball

app/javascript/auto-complete-oninputblur.js renamed to app/javascript/auto-complete-open.js

@@ -16,11 +16,16 @@
 
 import Autocomplete from '@github/auto-complete-element/dist/autocomplete.js'
 
-Autocomplete.prototype.onInputBlur = function(event) {
-  let target = event.explicitOriginalTarget
-  // Target will either be the <li> element or the text node of the typeahead result.
-  // The text nodes are wrapped in a span, so we need to look at the grandparent element
-  // to get the <li> role.
-  if ('option' === (target.role || target.parentElement.parentElement.role) ) return;
-  this.close();
+Autocomplete.prototype.open = function(event) {
+  const isHidden = this.results.popover ? !this.results.matches(':popover-open') : this.results.hidden
+  if (isHidden) {
+    this.combobox.start()
+    if (this.results.popover) {
+      this.results.showPopover()
+    } else {
+      this.results.hidden = false
+    }
+  }
+  this.container.open = true
+  this.interactingWithList = false
 };

app/javascript/packs/application.js

@@ -40,7 +40,7 @@ import Search from '../components/Search';
 import MediaObjectRamp from '../components/MediaObjectRamp';
 import ReactButtonContainer from '../components/ReactButtonContainer';
 import PlaylistRamp from '../components/PlaylistRamp';
-import '../auto-complete-oninputblur.js';
+import '../auto-complete-open.js';
 import '@github/auto-complete-element';
 
 ReactOnRails.register({