Tweak tag list to add new row on input instead of change

Prevented interferance with the user's action if they interacted with
something below the tags, since a new row would be added on blur and
hence shift down positions.

For #3931

diff --git a/resources/js/components/tag-manager.js b/resources/js/components/tag-manager.js
index cfbc514a07250070563798cb04c1b1f330e92c1f..24d34055327d506ce6728a28b384ab5f59ac2dce 100644 (file)
--- a/resources/js/components/tag-manager.js
+++ b/resources/js/components/tag-manager.js
@@ -10,10 +10,11 @@ export class TagManager extends Component {
     }
 
     setupListeners() {
-        this.container.addEventListener('change', event => {
+        this.container.addEventListener('input', event => {
+
             /** @var {AddRemoveRows} **/
             const addRemoveComponent = window.$components.firstOnElement(this.addRemoveComponentEl, 'add-remove-rows');
-            if (!this.hasEmptyRows()) {
+            if (!this.hasEmptyRows() && event.target.value) {
                 addRemoveComponent.add();
             }
         });