I am working in ionic when i install application in android device the hardware back button was not working, after some R & D i got solution to register back button i have done it. but my problem is when select option popover is open and i press back button then it dismiss the popover that's OK but when i want to reopen select option after pressing hardware back button i'm unable to open it. registering back button uses some condition to check active portals and dismiss the active portal if any found. but it does not allow to open select option again. can anyone help me to solve this issue? my code is below...
platform.ready().then(() => {
// this.config.pullVersion();
let ready = true;
// to handle hardware back button in android
platform.registerBackButtonAction(() => {
console.log("Back button action called");
let activePortal = ionicApp._loadingPortal.getActive() ||
ionicApp._modalPortal.getActive() ||
ionicApp._toastPortal.getActive() ||
ionicApp._overlayPortal.getActive();
let view = this.navCtrl.getActive();
if (activePortal) {
ready = false;
activePortal.dismiss();
activePortal.onDidDismiss(() => { ready = true; });
console.log("handled with portal");
return;
}
if (menuCtrl.isOpen()) {
menuCtrl.close();
console.log("closing menu");
return;
}
if (this.navCtrl.canGoBack()) {
this.navCtrl.pop();
console.log("poping back");
return;
} else {
console.log("exiting from app");
platform.exitApp();
console.log("poping back");
}
}, 1);
});
and select-option
<ion-select interface="popover" [disabled]="isStarted" [(ngModel)]="routeName" class="custom-option-btn" (ionChange)="optionsFn();">
<ion-option value="" selected disabled>select Route</ion-option>
<ion-option *ngFor="let cg of routeData;let idx = index" [value]="cg">{{cg.routeName}} </ion-option>
</ion-select>
this got dismissed in back button event and does not open select option again
ionicApp._overlayPortal.getActive()
I've been searching a lot about this topic, and Ionic Team hasn't developed a solution for this yet (I know it's been 3 years now). It seems that the only way we have to dismiss an ion-select is by using the 'cancel' button inside the selector.
Any other way, using platform.backbutton, or anything in IonicApp module won't let you do what you need.
The only real solution i can think about is creating a new Modal, only for the select, and implement your own scroll and selectable items, and then use ModalController.dismiss() to dismiss the select, as if you were pressing cancel inside the ion-select.
Related
so in ionic 3 there was registerBackButton() but in ionic 4 this option is no longer there and has been sitting on the shelf for quite some time now.
I have read the post here that tries to solve the solution I am looking for, however, the back button still performs as it wants to.
this SO answer shows another way but it is the same idea of intercepting and navigating, however, I am just, for now, trying to dismiss the top modal in the stack.
scenario: users open a search modal(modal1) which then they click on a users profile modal(modal2). The person wants to go back to the search modal(modal1) but instead of clicking the nice button that allows them to do that, they use the hardware back button.
result: all modals(modal1 and modal2) are closed.
desired effect: using the hardware back button will allow for custom navigation based on logic in place.
attempted code:
this.platform.backButton.subscribeWithPriority(0, (): void => {
this.modalCtrl.getTop().then(
async (value: HTMLIonModalElement): Promise<void> => {
if (!!value) {
await this.modalCtrl.dismiss();
} else {
this.navCtrl.navigateRoot('/home');
}
},
);
});
also have tried :
// registering back, if there is a view on top, close it, don't go to home.
this.platform.backButton.subscribeWithPriority(0, async (): Promise<void>=> {
try {
console.log('try');
const element = await this.modalCtrl.getTop();
if (element) {
console.log('in true');
await element.dismiss();
}
} catch (error) {
console.log('error closing modal', error);
}
});
note when pressing the back button I never see ANY of the console logs... maybe things have changed a lot more? since the previous Stack overflow questions.
UPDATE:
If you are having this same issue then know you are not alone!
This, and many others are well known, see here for a list they are tracking the issues. Nothing else to do... but wait... I guess...
I will update this when there is a change
I am using NGX-Bootstrap DatePicker
When i open it in tab or mobile (all the devices other than desktop and laptop).I need to tap on the Date two times to select. How to resolve this problem
For Demo please open (https://valor-software.com/ngx-bootstrap/#/datepicker) in TAB or MOBILE
I was facing the same problem yesterday. This is a Apple devices issue and happens because it device detect the user's first touch like a hover, instead of a click.
To solve this, im using a event inside the input that im calling the ngx-bootstrap datepicker to execute a method when calendar is shown , like:
<input type="text" bsDaterangepicker (onShown)="onShowPicker($event)">
and inside the method onShownPicker, my algorithm is detecting if the user is inside an apple device and then, it use a ngxbootstrap-datepicker method to instance dayHandler (that is called when click is normally detected, instead of hover):
onShowPicker(event) {
const dayHoverHandler = event.dayHoverHandler;
const hoverWrapper = (hoverEvent) => {
const { cell, isHovered } = hoverEvent;
if ((isHovered &&
!!navigator.platform &&
/iPad|iPhone|iPod|Apple/.test(navigator.platform)) &&
'ontouchstart' in window
) {
(this.datapickerDirective as any)._datepickerRef.instance.daySelectHandler(cell);
}
return dayHoverHandler(hoverEvent);
};
event.dayHoverHandler = hoverWrapper;
}
To work properly, you need to have the datepicker directive as viewChild because its used on this method above. in my case, im using like:
#ViewChild(BsDaterangepickerDirective, {static: false}) datapickerDirective;
What should happen when users click over back button of phone? In case when modal opens.
Registered a back button:
// To prevent interference with ionic's own backbutton handling
// you can subscribe with a low priority instead
this.platform.backButton.subscribe(() => {
// code that is executed when the user pressed the back button
// and ionic doesn't already know what to do (close modals etc...)
self.modalController.dismiss();
});
The problem with the code:
It closes/dismiss modal is fine!
But it also pushed back the page from where the modal is opened. Means it pop the page behind modal.
This should not happen the page should not pop - only modal should close.
Check the image gif added ->
Click here to see the problem
You may consider using platform.backButton.subscribeWithPriority() with a high priority (ex: 9999).
Then checking if there is a opened modal with modalController.getTop().
constructor(private modalCtrl: ModalController, private nav: NavController) {
}
ngOnInit() {
this.platform.backButton.subscribeWithPriority(9999, () => {
this.closeModalOrPage();
});
}
async closeModalOrPage(){
let modal = await this.modalCtrl.getTop();
if (modal){
modal.dismiss();
} else {
this.nav.pop();
}
}
How can I prevent ionic keyboard from hiding when I press a specific button in my Ionic 1 app?
This solution doesn't work for me, the keyboard remains open wherever I click.
A possible solution can be found here (the same link sent by Sahil Dhir). I also had this problem and this solution worked for me.
The directive is:
angular.module('msgr').directive('isFocused', function($timeout) {
return {
scope: { trigger: '#isFocused' },
link: function(scope, element) {
scope.$watch('trigger', function(value) {
if(value === "true") {
$timeout(function() {
element[0].focus();
element.on('blur', function() {
element[0].focus();
});
});
}
});
}
};
});
Its usage is:
<input type="text" is-focused="true">
What it basically does is to watch the focus of the input and whenever the input loses focus (when you press a button on the screen outside the keyboard, for example) it rapidly assigns the focus back to it. So the keyboard doesn't have time to hide.
Hope it works for you too!
According to the documentation (http://ionicframework.com/docs/api/controller/ionicModal/), the default behaviour is to close the current modal on back button. But it's not closing anything, instead, it performs the action of the main view, go back.
{boolean=} hardwareBackButtonClose: Whether the modal can be closed using the hardware back button on Android and similar devices. Default: true.
Here is my code when I initialize the modal:
$ionicModal.fromTemplateUrl('app/components/contacts/views/contacts.selectModal.html', {
scope: $scope,
animation: 'slide-in-up',
hardwareBackButtonClose: true
}).then(function(modal) {
$scope.contactSelect = modal;
});
I'm using Android 5.1, Ionic 1.2.1
Use $ionicModal option isShown() for recognize modal is open and close on tap hardwareBackButton
Work for me in Android Api 16
$ionicPlatform.registerBackButtonAction(function (event) {
if(vm.modal.isShown()) {
backModal();
} else {
window.history.back();
}
}, 999);