Angular 7 ESRI loader search widget focus out bug: finding a solution

Question

Angular 7 ESRI loader search widget focus out bug: finding a solution

I am currently working on implementing an ESRI map using esri-loader in my Angular application. Everything seems to be working fine, but I am encountering an error when typing something into the search widget and then focusing out of it.

"Uncaught TypeError: Cannot read property 'parentNode' of null
    at HTMLInputElement.d (dojo.js:2209)
    at Object.trigger (jquery.min.js:2)
    at Object.simulate (jquery.min.js:2)
    at HTMLDocument.n (jquery.min.js:2)
    at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:423)
    at Zone.push../node_modules/zone.js/dist/zone.js.Zone.runTask (zone.js:195)
    at ZoneTask.push../node_modules/zone.js/dist/zone.js.ZoneTask.invokeTask [as invoke] (zone.js:498)
    at invokeTask (zone.js:1693)
    at HTMLDocument.globalZoneAwareCaptureCallback (zone.js:1762)

I am using version 4.14 of ESRI.

I have looked into this thread for a solution, but haven't been able to resolve it yet.

Here is my package.json:

"esri-loader": "^2.15.0"

For the code implementation, here is what I have:

import { Component, OnInit, OnDestroy, ViewChild, ElementRef } from "@angular/core";
import { loadModules ,loadScript} from "esri-loader";    
@Component({
    selector: "app-esri-map",
    template: `
  <span> map component workes</span>
  <div class="esri-view" #mapViewNode></div>
  `,
    styles: [`
    @import url('https://js.arcgis.com/4.14/esri/css/main.css');    
    .esri-view {
      height: 600px;
    }`
    ]
})
export class MapComponent implements OnInit, OnDestroy {
    // The <div> where we will place the map
    @ViewChild("mapViewNode", { static: true }) private mapViewEl: ElementRef;
    view: any;    
    constructor() {
         loadScript();
     }    
    async initializeMap() {
        try {
           
            // Load the modules for the ArcGIS API for JavaScript
            const options = { version: '4.14', css: true };
          
            const [Map, MapView, Search] = await loadModules(
                ["esri/Map",
                    "esri/views/MapView",
                    "esri/widgets/Search"],options);

            // Configure the Map
            const mapProperties = {
                basemap: "streets"
            };

            const map = new Map(mapProperties);

            // Initialize the MapView
            const mapViewProperties = {
                container: this.mapViewEl.nativeElement,
                zoom: 10,
                map: map
            };

            this.view = new MapView(mapViewProperties);
            var search = new Search({
                view: this.view,
                searchTerm: `15 Inverness Way East, Englewood, CO80112, United States`,
            });
            console.log('search', search.search());
            this.view.ui.add(search, "top-right");
            search.on("select-result", function (event) {
                console.log("The selected search result: ", event);
                console.log('attributes', event.result.feature.attributes)
            });
            await this.view.when(); // wait for map to load
            console.log('this.view', this.view);
            return this.view;
        } catch (error) {
            console.error("EsriLoader: ", error);
        }
    }

    ngOnInit() {
        this.initializeMap();
    }
    ngAfterViewInit() {

    }

    ngOnDestroy() {
        if (this.view) {
            // destroy the map view
            this.view.container = null;
        }
    }
}

Do you think there is a need to change some configuration? Any suggestions would be greatly appreciated.

angular typescript angular7 esri

Answer 1

Answer №1

Insert the code snippet below into the initializeMap() function to explicitly set on focus out as null:

const handler = search.on('search-focus', event => {
                handler.remove();
                const input = document.querySelector('.esri-search__input') as any
                if (input) {
                    input.onfocusout = null;
                }
            });

Here is the full code block:

 import { Component, OnInit, OnDestroy, ViewChild, ElementRef, Input, Output, EventEmitter } from "@angular/core";
    import { loadModules, loadScript } from "esri-loader";
    @Component({
        selector: "app-esri-map",
        template: `
      <div class="esri-view" #mapViewNode></div>
      `,
        styles: [`
     /* @import url('https://js.arcgis.com/4.14/esri/css/main.css'); */
        .esri-view {
          height: 400px;
        }`
        ]
    })
    export class MapComponent implements OnInit, OnDestroy {
        // The <div> where we will place the map
        @ViewChild("mapViewNode", { static: true }) private mapViewEl: ElementRef;
        view: any;
        @Input() searchString: string;
        @Output() notifyAttributes: EventEmitter<any> = new EventEmitter();
        constructor() {
            //   loadScript();
            //"esri-loader": "^2.15.0", in dependency section.
        }
        async initializeMap() {
            try {
                // Load the modules for the ArcGIS API for JavaScript
                const options = { version: '4.14', css: true };
                const [Map, MapView, Search] = await loadModules(
                    ["esri/Map",
                        "esri/views/MapView",
                        "esri/widgets/Search"], options);
                // Configure the Map
                const mapProperties = {
                    basemap: "streets"
                };
                const map = new Map(mapProperties);
                // Initialize the MapView
                const mapViewProperties = {
                    container: this.mapViewEl.nativeElement,
                    zoom: 2,
                    center: [0.0000, 45.00000],
                    map: map
                };
                this.view = new MapView(mapViewProperties);
                var search = new Search({
                    view: this.view,
                    searchTerm: this.searchString,
                });
                if (this.searchString) {
                    search.search();
                }
                this.view.ui.add(search, "top-right");
                const handler = search.on('search-focus', event => {
                    handler.remove();
                    const input = document.querySelector('.esri-search__input') as any
                    if (input) {
                        input.onfocusout = null;
                    }
                });
                search.on("select-result", (event) => {
                    this.notifyAttributes.emit(event.result.feature.attributes);
                });
                await this.view.when(() => {
                    const input = document.querySelector('.esri-search__input') as any
                    if (input) {
                        input.onfocusout = null;
                    }
                }); // wait for map to load
                return this.view;
            } catch (error) {
                console.error("EsriLoader: ", error);
            }
        }
        ngOnInit() {
            this.initializeMap();
        }
        ngOnDestroy() {
            if (this.view) {
                this.view.container = null;
            }
        }
    }

Answer 2

Insert the code snippet below into the initializeMap() function to explicitly set on focus out as null:

const handler = search.on('search-focus', event => {
                handler.remove();
                const input = document.querySelector('.esri-search__input') as any
                if (input) {
                    input.onfocusout = null;
                }
            });

Here is the full code block:

 import { Component, OnInit, OnDestroy, ViewChild, ElementRef, Input, Output, EventEmitter } from "@angular/core";
    import { loadModules, loadScript } from "esri-loader";
    @Component({
        selector: "app-esri-map",
        template: `
      <div class="esri-view" #mapViewNode></div>
      `,
        styles: [`
     /* @import url('https://js.arcgis.com/4.14/esri/css/main.css'); */
        .esri-view {
          height: 400px;
        }`
        ]
    })
    export class MapComponent implements OnInit, OnDestroy {
        // The <div> where we will place the map
        @ViewChild("mapViewNode", { static: true }) private mapViewEl: ElementRef;
        view: any;
        @Input() searchString: string;
        @Output() notifyAttributes: EventEmitter<any> = new EventEmitter();
        constructor() {
            //   loadScript();
            //"esri-loader": "^2.15.0", in dependency section.
        }
        async initializeMap() {
            try {
                // Load the modules for the ArcGIS API for JavaScript
                const options = { version: '4.14', css: true };
                const [Map, MapView, Search] = await loadModules(
                    ["esri/Map",
                        "esri/views/MapView",
                        "esri/widgets/Search"], options);
                // Configure the Map
                const mapProperties = {
                    basemap: "streets"
                };
                const map = new Map(mapProperties);
                // Initialize the MapView
                const mapViewProperties = {
                    container: this.mapViewEl.nativeElement,
                    zoom: 2,
                    center: [0.0000, 45.00000],
                    map: map
                };
                this.view = new MapView(mapViewProperties);
                var search = new Search({
                    view: this.view,
                    searchTerm: this.searchString,
                });
                if (this.searchString) {
                    search.search();
                }
                this.view.ui.add(search, "top-right");
                const handler = search.on('search-focus', event => {
                    handler.remove();
                    const input = document.querySelector('.esri-search__input') as any
                    if (input) {
                        input.onfocusout = null;
                    }
                });
                search.on("select-result", (event) => {
                    this.notifyAttributes.emit(event.result.feature.attributes);
                });
                await this.view.when(() => {
                    const input = document.querySelector('.esri-search__input') as any
                    if (input) {
                        input.onfocusout = null;
                    }
                }); // wait for map to load
                return this.view;
            } catch (error) {
                console.error("EsriLoader: ", error);
            }
        }
        ngOnInit() {
            this.initializeMap();
        }
        ngOnDestroy() {
            if (this.view) {
                this.view.container = null;
            }
        }
    }

Angular 7 ESRI loader search widget focus out bug: finding a solution

Answer №1

Similar questions

Ensure that the form is submitted only after confirming it in the modal with react-hook-form

Mapping nested values from a Typescript object to properties of a JSON object

Values within the inner ngFor loop have been selected from the outer ngFor loop

Exploring the Ways to Determine Array Type in Typescript Generics

Developing a Javascript object using Typescript

The problem with uploading files in Angular4 (with multer on the server)

Running Jenkins in a Docker container to initiate the process of building an Angular application within a

The event handler cdkDropListDropped="drop($event)" is not triggering when interacting with a Material table that has a

The inclusion of an XSRF-TOKEN using an HTTP Interceptor results in a 400 Error Request

Angular5 - Modify a public variable using an intercept in a static service

Ways to parse the data from a response received from an Axios POST request

The current issue I am facing is that the option disabled with value="null" selected is not being shown on the screen. Instead, it should display as "Choose User Types"

Can you identify the nature of the argument(s) used in a styled-component?

The spread operator seems to be malfunctioning whenever I incorporate tailwindcss into my code

AngularJS and CSS: A Guide to Effortlessly Toggle Sliding List Elements

Using axiosjs to send FormData from a Node.js environment

Leverage the exported data from Highcharts Editor to create a fresh React chart

Encountering an issue with Jest when using jest.spyOn() and mockReturnValueOnce causing an error

Page Breaks - Patience in anticipation of dataSource readiness

Disarrayed generic parameters in TypeScript

Angular 7 ESRI loader search widget focus out bug: finding a solution

Answer №1

Similar questions

Ensure that the form is submitted only after confirming it in the modal with react-hook-form

Mapping nested values from a Typescript object to properties of a JSON object

Values within the inner *ngFor loop have been selected from the outer *ngFor loop

Exploring the Ways to Determine Array Type in Typescript Generics

Developing a Javascript object using Typescript

The problem with uploading files in Angular4 (with multer on the server)

Running Jenkins in a Docker container to initiate the process of building an Angular application within a

The event handler cdkDropListDropped="drop($event)" is not triggering when interacting with a Material table that has a

The inclusion of an XSRF-TOKEN using an HTTP Interceptor results in a 400 Error Request

Angular5 - Modify a public variable using an intercept in a static service

Ways to parse the data from a response received from an Axios POST request

The current issue I am facing is that the option disabled with value="null" selected is not being shown on the screen. Instead, it should display as "Choose User Types"

Can you identify the nature of the argument(s) used in a styled-component?

The spread operator seems to be malfunctioning whenever I incorporate tailwindcss into my code

AngularJS and CSS: A Guide to Effortlessly Toggle Sliding List Elements

Using axiosjs to send FormData from a Node.js environment

Leverage the exported data from Highcharts Editor to create a fresh React chart

Encountering an issue with Jest when using jest.spyOn() and mockReturnValueOnce causing an error

Page Breaks - Patience in anticipation of dataSource readiness

Disarrayed generic parameters in TypeScript

Values within the inner ngFor loop have been selected from the outer ngFor loop