Skip to content
This repository has been archived by the owner on May 29, 2019. It is now read-only.

Form submission and first item highlighted options + better UX #1360

Closed
wants to merge 1 commit into from
Closed

Form submission and first item highlighted options + better UX #1360

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
48 changes: 29 additions & 19 deletions src/typeahead/typeahead.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,8 +29,8 @@ angular.module('ui.bootstrap.typeahead', ['ui.bootstrap.position', 'ui.bootstrap
};
}])

.directive('typeahead', ['$compile', '$parse', '$q', '$timeout', '$document', '$position', 'typeaheadParser',
function ($compile, $parse, $q, $timeout, $document, $position, typeaheadParser) {
.directive('typeahead', ['$compile', '$parse', '$q', '$timeout', '$position', 'typeaheadParser',
function ($compile, $parse, $q, $timeout, $position, typeaheadParser) {

var HOT_KEYS = [9, 13, 27, 38, 40];

Expand All @@ -57,6 +57,12 @@ angular.module('ui.bootstrap.typeahead', ['ui.bootstrap.position', 'ui.bootstrap

var inputFormatter = attrs.typeaheadInputFormatter ? $parse(attrs.typeaheadInputFormatter) : undefined;

//should first item of matches be highlighted automatically? (default to false)
var autoHighlight = originalScope.$eval(attrs.typeaheadAutoHighlight) !== false;

//should form submission be prevented (enter keypress)? (default to false)
var preventSubmission = originalScope.$eval(attrs.typeaheadPreventSubmission) !== false;

//INTERNAL VARIABLES

//model setter executed upon match selection
Expand Down Expand Up @@ -104,7 +110,7 @@ angular.module('ui.bootstrap.typeahead', ['ui.bootstrap.position', 'ui.bootstrap
if (inputValue === modelCtrl.$viewValue && hasFocus) {
if (matches.length > 0) {

scope.activeIdx = 0;
scope.activeIdx = autoHighlight === true ? 0 : -1;
scope.matches.length = 0;

//transform labels
Expand Down Expand Up @@ -226,7 +232,21 @@ angular.module('ui.bootstrap.typeahead', ['ui.bootstrap.position', 'ui.bootstrap
//bind keyboard events: arrows up(38) / down(40), enter(13) and tab(9), esc(27)
element.bind('keydown', function (evt) {

//typeahead is open and an "interesting" key was pressed
// Skip if not a hot key is pressed
if (HOT_KEYS.indexOf(evt.which) === -1)
return;
else if (evt.which === 13) {
// (Enter key)
// Prevent default if prevent submission is set to true
if (preventSubmission === true)
evt.preventDefault();
// Only skip if no matches or no match selected
if (scope.activeIdx === -1)
return;
} else if (evt.which === 9 && scope.activeIdx === -1) {
// Skip if tab pressed and no item is selected
return;
}
if (scope.matches.length === 0 || HOT_KEYS.indexOf(evt.which) === -1) {
if (evt.which === 13) {
evt.preventDefault();
Expand Down Expand Up @@ -258,21 +278,11 @@ angular.module('ui.bootstrap.typeahead', ['ui.bootstrap.position', 'ui.bootstrap
});

element.bind('blur', function (evt) {
hasFocus = false;
});

// Keep reference to click handler to unbind it.
var dismissClickHandler = function (evt) {
if (element[0] !== evt.target) {
resetMatches();
resetMatches();
// Detect if $digest is already running, to avoid collisions
if(scope.$$phase !== '$digest')
scope.$digest();
}
};

$document.bind('click', dismissClickHandler);

originalScope.$on('$destroy', function(){
$document.unbind('click', dismissClickHandler);
hasFocus = false;
});

element.after($compile(popUpEl)(scope));
Expand Down Expand Up @@ -342,4 +352,4 @@ angular.module('ui.bootstrap.typeahead', ['ui.bootstrap.position', 'ui.bootstrap
return function(matchItem, query) {
return query ? matchItem.replace(new RegExp(escapeRegexp(query), 'gi'), '<strong>$&</strong>') : matchItem;
};
});
});