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.

Answer 1

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.