ngTagsInput
ngTagsInput copied to clipboard
Clicking the scroll bar within autocomplete requires an item to be selected
If you clicking on the scroll bar within autocomplete drop down list, it then requires an item to be selected in order for the autocomplete list to go away. Clicking on the page will no longer hide the autocomplete list. This appears to only happen if you click on the scroll bar instead of clicking on an item.
I was able to hack around this with the following change to the blur event:
blur: function() {
$timeout(function() {
var activeElement = $document.prop('activeElement'),
lostFocusToBrowserWindow = activeElement === input[0],
lostFocusToChildElement = element[0].contains(activeElement);
if (lostFocusToBrowserWindow || !lostFocusToChildElement) {
scope.hasFocus = false;
events.trigger('input-blur');
}
// added the following to return focus immediately if they clicked on the scroll bar
if (lostFocusToChildElement) {
input[0].focus();
}
});
}
We had the same problem. Thank you for the fix which works good. I would recommend putting this in the next release.
Note the only other way to get the autocomplete dropdown to close without selecting a tag is to click inside the text input area above the dropdown and then either hit ESC or click on the page outside the tag component.
@mbenford is this something that you could add to the master branch? We are using a patched copy now for our production release but would prefer to use an official release.