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 or activation 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);
}
async openPointModal (projectId, id, coord, name, obs, color, gps=false) {
const modal = await this.modalCtrl.create({
component: ModalPointPage,
componentProps: { modalProjectID: projectId, modalID: id, modalCoord: coord, modalName: name, modalObs: obs, modalColor: color, modalGps: gps },
backdropDismiss: false
});
//Get the data returned from the Modal and add to global variable
modal.onDidDismiss().then((modalData) => {
this.handleClosePointModal(modalData);
});
return await modal.present();
}
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 applied some logs in several related events to see if there was something firing more than once, but everything is firing just one time. 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, as suggested in comments, 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.