Is it possible to use addEventListener in Ionic


#1

I have a problem with autocomplete search on google maps on the IOS-platform.

There is a pretty long description of how to solve that and a lot of people have been struggling with it as can be seen on https://github.com/ionic-team/ionic/issues/1798#issuecomment-95943955

But basically the solution is pretty simple as you just trick the system to think the user exited the search field.

That is implemented this way in the old solution

        container = document.getElementsByClassName('pac-container');
        // disable ionic data tab
        angular.element(container).attr('data-tap-disabled', 'true');
        // leave input field if google-address-entry is selected
        angular.element(container).on("click", function(){
            document.getElementById('type-selector').blur();
        });

The ‘pac.container’ is added by google maps dynamically, and does for some strange reason not have an ID

This solution seems to work in Ionic 1, but as I am Ionic 3 I need to change the code slightly to

    var container = document.getElementsByClassName('pac-container');
    container[0].setAttribute('data-tap-disabled', 'true');
    container[0].addEventListener("click", function (e : any) {
            document.getElementById('type-selector').blur();
    });

I can see that the Eventlistener is added to the dynamic HTML-element, but the event is never fired.
I have testet all possible events, but nothing happens, as it suddenly struck me, that it might be Ionic, that isn’t parsing these events

Or is there another way I can catch in code, that a DIV has been click’ed


#2
<div (click)=“myStuff()”>

#3

I use the following putting the event in the constructor:

constructor(public http: Http ) {
this.disablescreen.addEventListener(“click”, (e:Event) => this.userClicked());
}

 userClicked(){
      console.log("clicked");
 }

#4

The div-tag is added dynamically, so this is not an option

but this works fine for other elements on the same page as the actual HTML looks like this

    <input #pacinput1 id="pacinput1" class="controls" type="text" placeholder="Search place" (focus)="disableTap()" (blur)="test()">
    <div #map id="map" data-tap-disabled="true">
    </div>

where the events focus and blur is executed fine.


#5

What type of element is disablescreen ? Just a DIV-tag ?


#6

How do you add these dynamically?

If you use ngfor and ngif, then still (click) is best way, imho


#7

Yes it is just a div with id=‘disablescreen’ but is should work with any element.


#8

I agree but the element I wanted to get the click on was in the app.html and would not accept the normal (click)="" method.


#9

Hi

This strikes me as odd as the ionic boilerplates allow you handle click events this way in app.html through app.component.ts.

I reckon there is something else going on

Tom


#10

It’s the way I got it to work - the div is called by a provider to set the style visibility property when the provider is playing an audio file. I use the div to fill the screen and disable the user from clicking on the screen - by adding the click listener I can check if the user did something.

To be honest when I started I thought the (click)=“functionName()” way would have worked and bubble through the code.


#11

I have created a small demo-project to illustrate my problem

If you clone it, build it and just calls

ionic serve

you will see a google map with a search box at the top of the map.
When you enter something in the box, up to five places will be suggested, and you can click on one and the map will zoom to that location

In the browser all works fine, and also on android, but on iPhones, when selecting a location the search field will just be updated with the selected info, and the you have to press enter to do the actual search

So the suggested solution is that when an item in the suggest list is selected, then blur the entry-field thus suggesting a user pressing enter.

If you look at home.ts you will see the lines

  disableTap() {
    var container = document.getElementsByClassName('pac-container');
    container[0].setAttribute('data-tap-disabled', 'true');
    container[0].addEventListener('click', (e: any) => {
      console.log("Dropdown clicked");
      document.getElementById('pacinput1').blur();
    });
  };

as the suggested code to hook up a listener on the dropdown list (That is dynamically added).
But it seems that the event never is fired (or parsed to the code)


#12

There is a (blur) event on the searchbox


#13

Your code seems to be fighting the framework. I recommend you refactor to use the Ionic Native plugin for Google Maps, and use the API with it, instead of the pre-2015 Javascript you’re currently using.


#14

Yes, that is not the issue, the issue is how to fire the blur event on the search box, when the user selects an item


#15

Hi Aron

When the project started I used the native plugin for google maps, unfortunately the plugin is not (and probably never will) using Google Maps V3. I have been down that road, so currently this seems to be the best way to implement my solution.

So the question is just, why am I not receiving these events in my code?

Thorvald


#16

I did some more research, and I think Ionic is messing with the events.

I added the following listener

document.addEventListener('click', (e: any) => {
  console.log("document clicked");
  console.log(e);
  console.log(e.target);
});

so whenever i click on something I should get the target in the console

Anything else than the dynamically added drop down works as expected, but when I click on an element in the drop down, the event is NOT fired.

I can see there is a TapClick function in Ionic-Angular, and that is registrering the click, but from there I can’t trace where the event is disappearing.


#17

Hmm, added a Z-index to the dynamically added HTML, just to be sure the click was on that element, and then the TapClick function is not activated

So I am thinking that I might have stumled upon some security issues, where ionic/angular “helps me” by removing click events on dynamically added html


#18

I haven’t read the whole thread properly but your last comment sounds similar to an issue I was having with a custom combo box i made out of a text input. The click event was not registering properly (I tried z-index as well), but what worked for me was having a (mousedown)="$event.preventDefault()" on the same element with the (click)="SelectResult($event.target)" click event.