How do I close an $ionicPopup before opening a new one?

Question

I'm creating an Ionic application with a form and some required fields.

When the form is submitted and if it isn't valid, I display an alert message using Ionic's $ionicPopup service.

My problem is: the user can press "ENTER" or ("Go" button within Android) to both invoke form submission and close the popup which causes another popup to open.

You can see this happening here:

Sample Code

Focus the input, press ENTER and when the error message is displayed, press ENTER again to close it. Another popup will open (most likely because the input behind the backdrop still has focus or maybe because the modal is created within the form - having ENTER invoke submit again).

Is there any way to avoid that behavior? Maybe the ENTER within the $ionicPopup to close it without submitting the form again, or at least having some code to close any active popups before displaying a new one? Because when you open multiple popups, if you try the mouse (or tap) to close a message, the user is prompted to then close all other dialogs before being sent back to the main screen.

I know I could try to get the reference to the popup and call the close() method but it didn't quite work for me. Eventually the new alert opens before the previous one is fully closed and the backdrop gets stuck on the screen forever.

Thanks for helping.

you need to lose focus from the controls so when press enter will response to alert only — Abdelrahman M. Allam, Dec 23 '15 at 22:33
I've found out it doesn't work. Turns out the actual problem is that the popup cannot be closed by pressing enter. When I press enter the second time I'm actually submitting the form again. Hence opening another popup. And I'm struggling taking the focus out of the form because my page does not have any visible controls other than the form controls (login page for example). — Rodrigo Lira, Dec 24 '15 at 02:40

score 1 · Accepted Answer · answered Dec 28 '15 at 13:31

As it turns out, my actual problem is that the $ionicPopup does not support pressing ENTER (or "go" on Android keyboard) to close the popup. For some reason, I tried to take the focus out of the inputs but it didn't work.

For anyone with the same problem, I ended up creating an angular directive to close the device keyboard when the form is submitted.

Here's the directive code:

(function () {
    'use strict';

    angular
        .module('myModule')
        .directive('closeKeyboardOnSubmit', closeKeyboardOnSubmit);

    closeKeyboardOnSubmit.$inject = ['$ionicPlatform', '$cordovaKeyboard'];

    function closeKeyboardOnSubmit($ionicPlatform, $cordovaKeyboard) {

        var directive = {
            require: '^form',
            restrict: 'A',
            link: link
        };

        return directive;

        function link (scope, element) {
            element.on("submit", function(){
                $ionicPlatform.ready(function(){
                    $cordovaKeyboard.close();
                }); 
            });
        }
    }

})();

then I used it on the form tags like this:

<form close-keyboard-on-submit ...>

Obviously the problem still happens when testing directly on the browser but works when deploying to the devices.

I think you don't need to use platform ready in the code. it will execute every time, rather in your the app.js once you include that keyboard instance, you can use that throughout and you can check if keyboard is shown then hide. Also we can use single vairable for multiple instance of popups, hide the first intance and open other by assigning new one. Remember always close any popups, popover, when controller scope gets destroyed.. — Prasad Shinde, May 29 '16 at 10:29

How do I close an $ionicPopup before opening a new one?

1 Answers1