Skip to content
This repository has been archived by the owner on Sep 5, 2024. It is now read-only.

Commit

Permalink
fix(autocomplete): keyboard input used by autocomplete will now call
Browse files Browse the repository at this point in the history 
`$event.stopPropagation()` to prevent the event from bubbling up

Closes #2931
  • Loading branch information
Robert Messerle committed Jul 13, 2015
1 parent b316bba commit 2781eac
Show file tree
Hide file tree
Showing 2 changed files with 8 additions and 7 deletions.
8 changes: 4 additions & 4 deletions src/components/autocomplete/autocomplete.spec.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -55,8 +55,8 @@ describe('<md-autocomplete>', function() {
expect(scope.match(scope.searchText).length).toBe(1);
expect(ul.find('li').length).toBe(1);

ctrl.keydown({ keyCode: $mdConstant.KEY_CODE.DOWN_ARROW, preventDefault: angular.noop });
ctrl.keydown({ keyCode: $mdConstant.KEY_CODE.ENTER, preventDefault: angular.noop });
ctrl.keydown({ keyCode: $mdConstant.KEY_CODE.DOWN_ARROW, stopPropagation: angular.noop });
ctrl.keydown({ keyCode: $mdConstant.KEY_CODE.ENTER, stopPropagation: angular.noop });
scope.$apply();
$timeout.flush();

Expand Down Expand Up @@ -95,8 +95,8 @@ describe('<md-autocomplete>', function() {
expect(scope.match(scope.searchText).length).toBe(1);
expect(ul.find('li').length).toBe(1);

ctrl.keydown({ keyCode: $mdConstant.KEY_CODE.DOWN_ARROW, preventDefault: angular.noop });
ctrl.keydown({ keyCode: $mdConstant.KEY_CODE.ENTER, preventDefault: angular.noop });
ctrl.keydown({ keyCode: $mdConstant.KEY_CODE.DOWN_ARROW, stopPropagation: angular.noop });
ctrl.keydown({ keyCode: $mdConstant.KEY_CODE.ENTER, stopPropagation: angular.noop });
scope.$apply();
$timeout.flush();

Expand Down
7 changes: 4 additions & 3 deletions src/components/autocomplete/js/autocompleteController.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -347,25 +347,26 @@ function MdAutocompleteCtrl ($scope, $element, $mdUtil, $mdConstant, $mdTheming,
switch (event.keyCode) {
case $mdConstant.KEY_CODE.DOWN_ARROW:
if (ctrl.loading) return;
event.preventDefault();
event.stopPropagation();
ctrl.index = Math.min(ctrl.index + 1, ctrl.matches.length - 1);
updateScroll();
updateMessages();
break;
case $mdConstant.KEY_CODE.UP_ARROW:
if (ctrl.loading) return;
event.preventDefault();
event.stopPropagation();
ctrl.index = ctrl.index < 0 ? ctrl.matches.length - 1 : Math.max(0, ctrl.index - 1);
updateScroll();
updateMessages();
break;
case $mdConstant.KEY_CODE.TAB:
case $mdConstant.KEY_CODE.ENTER:
if (ctrl.hidden || ctrl.loading || ctrl.index < 0 || ctrl.matches.length < 1) return;
event.preventDefault();
event.stopPropagation();
select(ctrl.index);
break;
case $mdConstant.KEY_CODE.ESCAPE:
event.stopPropagation();
ctrl.matches = [];
ctrl.hidden = true;
ctrl.index = getDefaultIndex();
Expand Down

2 comments on commit 2781eac

@clshortfuse
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This actually breaks support for dialogs and forms. {ENTER} will always submit the form and {ESCAPE} will close the dialog boxes. I worked around it by adding back the event.preventDefault(), but still keeping the event.stopPropagation().

@robertmesserle
Copy link
Contributor

@robertmesserle robertmesserle commented on 2781eac Jul 15, 2015 via email

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Please sign in to comment.