ngTagsInput - How to block removing tags via 'Backspace'

Question

The ngTagsInput library does not have an option to disable removing tags via the 'Backspace' key.

Adding a normal keydown event will not suffice, because you need to intercept the existing event not add a new one, so any attempt to event.preventDefault() will not work.

Any ideas how to disable it?

Answer 1

The solution I came up with is to short circuit the on-tag-removing function like so:

        # Weird hack to prevent backspace deleting of tags
        # "selected" is the red treatment you get (early warning)
        # to indicate that the next backspace will delete the tag.
        # TODO: It'd be nice to have this NOT throw:
        # 'Possibly unhandled rejection: undefined'
        # But...could easily live with this in the console.
        if document.querySelector('.tag-item.selected')
          return false

NOTE Do yourself a favor and check your version of ngTagsInput matches the current version of the online docs as the on-tag-removing function has changed to handle async/promises differently. This example works using the current newest version.

NOTE If you want other instances of the ngTagsInput to allow the deleting, you might have to more accurately scope the querySelector!