Search widget in onfocusout in 4.7 causes error when used with jQuery

[KrisKaplan1]

With the 4.7 release, we are seeing errors coming from the onfocusout handler of the Search widget.  It was tracked down to be caused by an interaction with jQuery.  If a jQuery 'focusout' event listener is anywhere along the parent path of the search widget input, the widget's handler will error trying to walk up the parentNode path.  This is because the simulated bubble event fired by jQuery (apparently to work around some browser version focus event issues) fires with the target element at the top of the path (not the input).  The error is:

dojo.js:2072 Uncaught TypeError: Cannot read property 'parentNode' of null
at HTMLInputElement.d [as onfocusout] (dojo.js:2072)
at Object.trigger (jquery-3.3.1.js:8255)
at Object.simulate (jquery-3.3.1.js:8318)
at HTMLDocument.handler (jquery-3.3.1.js:8352)

This can be reproduced by added jQuery and a focusout listener to any element outside the search input.  For example to any sample with a Search widget add:

<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script>
  $(document).ready(() => $('body').on('focusout', () => {}));
</script>

Then click in the Search input control, and then click anywhere outside the Search input and check the console.  If you change the arcgisjs API version from 4.7 to 4.6 the error does not occur.  The following jsfiddle example demonstrates this.  http://jsfiddle.net/xrwfhc1n

Kris

[Anonymous User]

Same issue, and I am using the 4.8 release.

[SamHall]

I am seeing the same issue with 4.8.

[williampreston]

  This bug is affecting our production version of an application. Esri clients and the public have no way of fixing this. Please Escalate.

[KrisKaplan1]

FWIW: I have temporarily worked around this problem by just removing the onfocusout event handler from the esri-search__input element (after the first focus event to make sure it is after their event handlers are attached).  Obviously this removes any side effects this handler was performing, but so far iremoving this has not had any significant problems (definitely not as bad as the original error).

Kris

// With version 4.7 the search widget's onfocusout handler will throw an error

// whenever there is a jQuery onfocusout handler along the event path because of

// jQuery's event bubbling workaround for focusin/out events. So for now, just

// remove the Search widget's onfocusout handler to silence the error.

const handler = this.search.on('search-focus', event => {

   handler.remove();

   const input = searchDiv.querySelector('.esri-search__input');

   if (input) {

      input.onfocusout = null;

   }

});

[kolinn]

view.when(() => {
document.querySelector('.esri-search__input').onfocusout = null;
});

your commented code is work for me. Thanks!