Invoke the `onTagInput` callback when clearing tag input

Any time the value of the tag input field changes, the `onTagInput`
callback needs to be invoked.

Fixes #2550

src/sidebar/components/tag-editor.js

@@ -62,7 +62,10 @@ function TagEditor({
    */
   const pendingTag = () => inputEl.current.value.trim();
   const hasPendingTag = () => pendingTag() && pendingTag().length > 0;
-  const clearPendingTag = () => (inputEl.current.value = '');
+  const clearPendingTag = () => {
+    inputEl.current.value = '';
+    onTagInput?.('');
+  };
 
   /**
    * Helper function that returns a list of suggestions less any

src/sidebar/components/test/tag-editor-test.js

@@ -278,6 +278,11 @@ describe('TagEditor', function () {
       const wrapper = createComponent();
       selectOption(wrapper, 'tag3');
       assertAddTagsSuccess(wrapper, 'tag3');
+      // Tag wasn't "typed in", so `onTagInput` will only be called once:
+      // when the tag is successfully added and the pending tag is "cleared":
+      assert.equal(fakeOnTagInput.callCount, 1);
+      // This clears the pending tag
+      assert.calledWith(fakeOnTagInput, '');
     });
 
     [
@@ -291,6 +296,11 @@ describe('TagEditor', function () {
         typeInput(wrapper); // opens suggestion list
         keyAction[0](wrapper);
         assertAddTagsSuccess(wrapper, 'umbrella');
+        // The onTagInput callback will have been called twice: once when text
+        // is "inputted" and once on adding the tag to clear the pending value
+        assert.equal(fakeOnTagInput.callCount, 2);
+        assert.calledWith(fakeOnTagInput, 'umbrella');
+        assert.calledWith(fakeOnTagInput, '');
         // ensure focus is still on the input field
         assert.equal(document.activeElement.nodeName, 'INPUT');
       });