Closing a modal with Android back button

In a Convertigo PWA application, what comes first to close a modal page? In Android, it is likely to be the hardware back button! How do you manage it so it does not go back in the pages history?

Here after a 8.2 sample project to import in your Studio, to see how it works: modal_back

It is based on the following article: Closing a modal with the back button in Ionic 5 / Angular 9

In the ‘Edit page class’ of the page that contains the Modal component, change like:

/*Begin_c8o_PageImport*/
import { HostListener } from '@angular/core';
/*End_c8o_PageImport*/

/*Begin_c8o_PageDeclaration*/
	@HostListener('window:popstate', ['$event'])
	  dismissModal() {
		  this.c8o.log.warn('DISMISS MODAL!!!');
		  let modalController = this.getInstance(ModalController);
		  modalController.dismiss();
	  }
	/*End_c8o_PageDeclaration*/

In the Modal component add 2 events : willPresent and willDismiss:

Edit ‘init’ customAction component :

/*Begin_c8o_function:CTS1683726261570*/
		page.c8o.log.debug('[MB] '+ props.actionFunction +': '+ props.actionName);
		page.global.modalState = {
			modal: true,
			desc: "fake state for ou modal"
		};
		history.pushState(page.global.modalState, null);
		resolve();
		/*End_c8o_function:CTS1683726261570*/

And 'destroy' customAction component:

/*Begin_c8o_function:CTS1683726422831*/
		page.c8o.log.debug('[MB] '+ props.actionFunction +': '+ props.actionName);
		if(window.history.state.modal){
			history.back();
		}
		resolve();
		/*End_c8o_function:CTS1683726422831*/

See it in action with a real Android device:

Convertigo KB

Closing a modal with Android back button

Analytics

Related content