TokenField should blur on tab when multi=false

frontend/src/metabase/components/TokenField.jsx

@@ -284,8 +284,10 @@ export default class TokenField extends Component {
         } else if (this.props.parseFreeformValue) {
             // if we previously updated on input change then we don't need to do it again,
             if (this.props.updateOnInputChange) {
-              // also prevent the input from changing due to this key press
-              e.preventDefault();
+              // if multi=true also prevent the input from changing due to this key press
+              if (multi) {
+                e.preventDefault();
+              }
               // and clear the input
               this.clearInputValue()
               // return false so we don't stop the keyDown from propagating in case we're listening

frontend/test/components/TokenField.unit.spec.js

@@ -261,4 +261,38 @@ describe("TokenField", () => {
             })
         )
     })
+
+    describe("with multi=true", () => {
+      it("should prevent blurring on tab", () => {
+        const preventDefault = jest.fn()
+        const component = mount(<TokenFieldWithStateAndDefaults
+          options={DEFAULT_OPTIONS}
+          // return null for empty string since it's not a valid
+          parseFreeformValue={(value) => value || null}
+          updateOnInputChange
+          multi
+        />)
+        const input = component.find("input");
+        input.simulate("focus");
+        input.simulate("change", { target: { value: "asdf" } });
+        input.simulate("keydown", { keyCode: KEYCODE_TAB, preventDefault: preventDefault })
+        expect(preventDefault).toHaveBeenCalled();
+      })
+    })
+    describe("with multi=false", () => {
+      it("should not prevent blurring on tab", () => {
+        const preventDefault = jest.fn()
+        const component = mount(<TokenFieldWithStateAndDefaults
+          options={DEFAULT_OPTIONS}
+          // return null for empty string since it's not a valid
+          parseFreeformValue={(value) => value || null}
+          updateOnInputChange
+        />)
+        const input = component.find("input");
+        input.simulate("focus");
+        input.simulate("change", { target: { value: "asdf" } });
+        input.simulate("keydown", { keyCode: KEYCODE_TAB, preventDefault: preventDefault })
+        expect(preventDefault).not.toHaveBeenCalled();
+      })
+    })
 })