topic Search widget in onfocusout in 4.7 causes error when used with jQuery in ArcGIS JavaScript Maps SDK Questions

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

KrisKaplan1 — Sun, 12 Dec 2021 16:09:38 GMT

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

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

Anonymous User — Fri, 07 Sep 2018 17:56:27 GMT

Same issue, and I am using the 4.8 release.

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

SamHall — Mon, 17 Sep 2018 23:40:51 GMT

I am seeing the same issue with 4.8.

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

williampreston — Fri, 26 Oct 2018 14:35:24 GMT

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

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

KrisKaplan1 — Mon, 29 Oct 2018 14:34:57 GMT

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;

}

});

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

kolinn — Wed, 18 Dec 2019 08:37:44 GMT

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

your commented code is work for me. Thanks!