CODEWITHSUNDEEP
angularjs
gman
gman

Reputation: 167

How do I only submit the highest level modal when enter is pressed?

I have a angular module that opens a Modal A (Find Report) so the user can enter search criteria. Modal A also has a field that opens Model B (Find Investigator) to search and find a person for Modal A.

The issue arises when I press enter with both modals open, both find functions execute. Is there a way I can make my directive smart enough to only execute the function on Modal B in this case... whichever modal was open last? or has the highest z-index etc.

my directive

//Put this on a button to make it the default 
.directive('autoEnterDirective', ['$document', function($document) {
return {
  scope: {
      autoEnterDirective: "&"
  },
  link: function(scope, element, attrs) {
    var enterWatcher = function(event) {
      if (event.which === 13) {
        scope.autoEnterDirective();
        scope.$apply();
        ///console.log('ENTER')
        event.preventDefault();
        $document.unbind("keydown keypress", enterWatcher);
      }
    };
    $document.bind("keydown keypress", enterWatcher);
  }
}
}])

my markup for modal A (Find Report)

<a id="btnFind" class="button small box-shadow-inset" auto-enter-directive="findModal()" ng-click="findModal()">Find</a>

my markup for modal B (Find Investigator)

<a id="btnFind" class="button small box-shadow-inset" auto-enter-directive="findModal()" ng-click="findModal()">Find</a>

Upvotes: 0

Views: 34

Answers (1)

Kyle Krzeski
Kyle Krzeski

Reputation: 6527

You're running into one of the many issues why modals aren't meant to be opened over other modals...

While it may be "easiest" initially, it's not suggested or even supported (in some cases) and is hardly ever worth it as far as UX goes. It's like popup inception - there really aren't many use cases for this that make sense.

Here are a few articles worth reading:

Upvotes: 1

Related Questions