taufik-nurrohman / tag-picker

Better tags input interaction with JavaScript.
http://taufik-nurrohman.js.org/tag-picker
MIT License
28 stars 3 forks source link

Allow users to change focus without adding tag #18

Closed kirankunigiri closed 3 years ago

kirankunigiri commented 3 years ago

Currently, whenever the user clicks outside of the input area or presses tab to change focus, a new tag will automatically be inserted. Is there a way to disable this? I want users to keep their current text when they click off, instead of automatically converting it. Thanks.

taufik-nurrohman commented 3 years ago

You can disable that, but this is a bit hacky. Hopefully you don’t see any glitch in the UI because of the last tag removal on every blur event:

let hasValue = false;

picker.input.addEventListener('input', function() {
    hasValue = !!this.textContent;
});

picker.on('blur', function(tags, count) {
    if (0 === count || !hasValue) {
        return; // Ignore if no tags available or input has no value
    }
    let lastTag = tags[count - 1];
    this.let(lastTag); // Remove the last tag
    this.input.textContent = lastTag; // Put the last tag back to the input
});