ngTagsInput icon indicating copy to clipboard operation
ngTagsInput copied to clipboard

Clicking the scroll bar within autocomplete requires an item to be selected

Open jonpopp opened this issue 7 years ago • 4 comments

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.

jonpopp avatar May 01 '17 22:05 jonpopp

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();
    }
  });
}

jonpopp avatar May 05 '17 16:05 jonpopp

We had the same problem. Thank you for the fix which works good. I would recommend putting this in the next release.

c094728 avatar Jan 23 '18 20:01 c094728

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.

c094728 avatar Jan 23 '18 21:01 c094728

@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.

c094728 avatar Jan 24 '18 18:01 c094728