Double click happening when opening modal

Problem description

I don’t really know if what is happening is indeed a double click event, I’m having a really hard time debugging this problem.

I have a map component (OpenLayers) inside a page called ‘map’, in this page I can create and edit some geometries. When I toggle a ‘edit’ tool on and select one of these geometries a modal opens with some properties of this geometry which I can edit and save. One of this properties is the color, which is selected with ion-select. When I click in the input of ion-select a kind of popover pops up for the color selection.

My problem is that, when the geometry of the map is aligned in the same position that the ion-select input, this popover opens automatically, like it was clicked. None of the others inputs are affected in the same way, which would be the selection of these inputs.

<ion-item>
  	<ion-label position="stacked">Estilo: </ion-label>
  	<ion-select okText="Ok" cancelText="Cancelar" placeholder="Selecione uma" [(ngModel)]="modalColor" value="{{modalColor}}" [disabled]="modalGps">
		<ion-select-option value="yellow">Amarelo</ion-select-option>
		<ion-select-option value="red">Vermelho</ion-select-option>
		<ion-select-option value="pink">Rosa</ion-select-option>
		<ion-select-option value="purple">Roxo</ion-select-option>
		<ion-select-option value="blue">Azul</ion-select-option>
		<ion-select-option value="gray">Cinza</ion-select-option>
		<ion-select-option value="white">Branco</ion-select-option>
		<ion-select-option value="black">Preto</ion-select-option>
	</ion-select>
</ion-item>
this.map.on('click', (evt) => {
	let feature = this.map.forEachFeatureAtPixel(
		evt.pixel,	(feature) => {
			if (feature.getId() !== 'accTrackingPoint' && feature.getId() !== 'trackingPoint') { 
				return feature; 
			}
		}, 
		{hitTolerance: this.hit_tolerance}
	);

	if (feature && feature.getGeometry().getType() === "Point") {
		return this.editPoint(feature);
	}
});

editPoint(feature: Feature): Promise<void> {
	// Get data from current point feature
	... 

	// Open edit modal
	return this.openPointModal(this.projectId, id, coord, name, obs, color, isGps);
}

Images to illustrate the problem


Point aligned with text input and not triggering it when clicked



Point aligned with select input and triggering the popover when clicked

Some system information

Ionic:

   Ionic CLI                     : 6.10.1 
   Ionic Framework               : @ionic/angular 4.11.7
   @angular-devkit/build-angular : 0.801.2
   @angular-devkit/schematics    : 8.1.3
   @angular/cli                  : 8.1.3
   @ionic/angular-toolkit        : 2.0.0

Cordova:

   Cordova CLI       : 9.0.0 (cordova-lib@9.0.1)
   Cordova Platforms : android 8.1.0
  • OpenLayers v5.3

I create a click event on the select input using angular (click) and it is also fired when the popover is opened, I believe that this may contribute to the idea that a double click is happening, although previous logs do not point this out. I also added the stopPropagation() method to the map.on('click') event, but there was no change in behavior.


It’s important to point out that this problem don’t happen for the browser version, only in the app version.