kriskaplan

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

Discussion created by kriskaplan on Jun 5, 2018
Latest reply on Sep 17, 2018 by schall11

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

Outcomes