Adding addOnBlur to TagInput

packages/docs-app/src/examples/labs-examples/tagInputExample.tsx

@@ -25,6 +25,7 @@ const VALUES = [
 ];
 
 export interface ITagInputExampleState {
+    addOnBlur?: boolean;
     disabled?: boolean;
     fill?: boolean;
     intent?: boolean;
@@ -35,6 +36,7 @@ export interface ITagInputExampleState {
 
 export class TagInputExample extends BaseExample<ITagInputExampleState> {
     public state: ITagInputExampleState = {
+        addOnBlur: false,
         disabled: false,
         fill: false,
         intent: false,
@@ -43,14 +45,15 @@ export class TagInputExample extends BaseExample<ITagInputExampleState> {
         values: VALUES,
     };
 
+    private handleAddOnBlurChange = handleBooleanChange(addOnBlur => this.setState({ addOnBlur }));
     private handleDisabledChange = handleBooleanChange(disabled => this.setState({ disabled }));
     private handleFillChange = handleBooleanChange(fill => this.setState({ fill }));
     private handleIntentChange = handleBooleanChange(intent => this.setState({ intent }));
     private handleLargeChange = handleBooleanChange(large => this.setState({ large }));
     private handleMinimalChange = handleBooleanChange(minimal => this.setState({ minimal }));
 
     protected renderExample() {
-        const { disabled, fill, large, values } = this.state;
+        const { addOnBlur, disabled, fill, large, values } = this.state;
 
         const classes = classNames({
             [Classes.FILL]: fill,
@@ -84,6 +87,7 @@ export class TagInputExample extends BaseExample<ITagInputExampleState> {
                 placeholder="Separate values with commas..."
                 tagProps={getTagProps}
                 values={values}
+                addOnBlur={addOnBlur}
             />
         );
     }
@@ -104,6 +108,12 @@ export class TagInputExample extends BaseExample<ITagInputExampleState> {
                     key="disabled"
                     onChange={this.handleDisabledChange}
                 />,
+                <Switch
+                    checked={this.state.addOnBlur}
+                    label="Add on blur"
+                    key="addOnBlur"
+                    onChange={this.handleAddOnBlurChange}
+                />,
             ],
             [
                 <label key="heading" className={Classes.LABEL}>
@@ -125,7 +135,9 @@ export class TagInputExample extends BaseExample<ITagInputExampleState> {
         ];
     }
 
-    private handleChange = (values: React.ReactNode[]) => this.setState({ values });
+    private handleChange = (values: React.ReactNode[]) => {
+        this.setState({ values });
+    };
 
     private handleClear = () => this.handleChange(this.state.values.length > 0 ? [] : VALUES);
 }

packages/labs/src/components/tag-input/tag-input.md

@@ -10,7 +10,7 @@
 
 @reactExample TagInputExample
 
-**`TagInput` must be controlled,** meaning the `values` prop is required and event handlers are strongly suggested. Typing in the input and pressing <kbd class="pt-key">enter</kbd> will **add new items** by invoking callbacks. A `separator` prop is supported to allow multiple items to be added at once; the default splits on commas.
+**`TagInput` must be controlled,** meaning the `values` prop is required and event handlers are strongly suggested. Typing in the input and pressing <kbd class="pt-key">enter</kbd> will **add new items** by invoking callbacks. If `addOnBlur` is set to true, clicking out of the component will also trigger the callback to add new items. A `separator` prop is supported to allow multiple items to be added at once; the default splits on commas.
 
 **Tags can be removed** by clicking their <span class="pt-icon-standard pt-icon-cross"></span> buttons, or by pressing <kbd class="pt-key">backspace</kbd> repeatedly. Arrow keys can also be used to focus on a particular tag before removing it. The cursor must be at the beginning of the text input for these interactions.
 

packages/labs/src/components/tag-input/tagInput.tsx

@@ -23,6 +23,13 @@ import {
 import * as Classes from "../../common/classes";
 
 export interface ITagInputProps extends IProps {
+    /**
+     * If true, onAdd will also be invoked when the input loses focus.
+     * By default, onAdd is only invoked on enter.
+     * @default false
+     */
+    addOnBlur?: boolean;
+
     /**
      * Whether the component is non-interactive.
      * Note that you'll also need to disable the component's `rightElement`,
@@ -209,6 +216,21 @@ export class TagInput extends AbstractComponent<ITagInputProps, ITagInputState>
         );
     }
 
+    private addTag = (value: string) => {
+        const { onAdd, onChange, values } = this.props;
+        // enter key on non-empty string invokes onAdd
+        const newValues = this.getValues(value);
+        let shouldClearInput = Utils.safeInvoke(onAdd, newValues);
+        // avoid a potentially expensive computation if this prop is omitted
+        if (Utils.isFunction(onChange)) {
+            shouldClearInput = shouldClearInput || onChange([...values, ...newValues]);
+        }
+        // only explicit return false cancels text clearing
+        if (shouldClearInput !== false) {
+            this.setState({ inputValue: "" });
+        }
+    };
+
     private maybeRenderTag = (tag: React.ReactNode, index: number) => {
         if (!tag) {
             return null;
@@ -276,6 +298,9 @@ export class TagInput extends AbstractComponent<ITagInputProps, ITagInputState>
             // we only need to "unfocus" if the blur event is leaving the container.
             // defer this check using rAF so activeElement will have updated.
             if (this.inputElement != null && !this.inputElement.parentElement.contains(document.activeElement)) {
+                if (this.state.inputValue.length > 0 && this.props.addOnBlur) {
+                    this.addTag(this.state.inputValue);
+                }
                 this.setState({ activeIndex: NONE, isInputFocused: false });
             }
         });
@@ -298,18 +323,7 @@ export class TagInput extends AbstractComponent<ITagInputProps, ITagInputState>
         let activeIndexToEmit = activeIndex;
 
         if (event.which === Keys.ENTER && value.length > 0) {
-            const { onAdd, onChange, values } = this.props;
-            // enter key on non-empty string invokes onAdd
-            const newValues = this.getValues(value);
-            let shouldClearInput = Utils.safeInvoke(onAdd, newValues);
-            // avoid a potentially expensive computation if this prop is omitted
-            if (Utils.isFunction(onChange)) {
-                shouldClearInput = shouldClearInput || onChange([...values, ...newValues]);
-            }
-            // only explicit return false cancels text clearing
-            if (shouldClearInput !== false) {
-                this.setState({ inputValue: "" });
-            }
+            this.addTag(value);
         } else if (selectionEnd === 0 && this.props.values.length > 0) {
             // cursor at beginning of input allows interaction with tags.
             // use selectionEnd to verify cursor position and no text selection.

packages/labs/test/tagInputTests.tsx

@@ -98,6 +98,31 @@ describe("<TagInput>", () => {
             assert.deepEqual(onAdd.args[0][0], [NEW_VALUE]);
         });
 
+        it("is invoked on blur when addOnBlur is true", done => {
+            const onAdd = sinon.stub();
+            const wrapper = mount(<TagInput values={VALUES} addOnBlur={true} onAdd={onAdd} />);
+            // simulate typing input text
+            wrapper.setProps({ inputProps: { value: NEW_VALUE } });
+            wrapper.find("input").simulate("change", { currentTarget: { value: NEW_VALUE } });
+            const fakeEvent = { flag: "yes" };
+            wrapper.simulate("blur", fakeEvent);
+            setTimeout(() => {
+                assert.isTrue(onAdd.calledOnce);
+                done();
+            });
+        });
+
+        it("is not invoked on blur when addOnBlur is false", done => {
+            const onAdd = sinon.stub();
+            const wrapper = mount(<TagInput values={VALUES} inputProps={{ value: NEW_VALUE }} onAdd={onAdd} />);
+            const fakeEvent = { flag: "yes" };
+            wrapper.simulate("blur", fakeEvent);
+            setTimeout(() => {
+                assert.isTrue(onAdd.notCalled);
+                done();
+            });
+        });
+
         it("does not clear the input if onAdd returns false", () => {
             const onAdd = sinon.stub().returns(false);
             const wrapper = mountTagInput(onAdd);
@@ -383,8 +408,8 @@ describe("<TagInput>", () => {
     function createInputKeydownEventMetadata(value: string, which: number) {
         return {
             currentTarget: { value },
-            // Enzyme throws errors if we don't mock the preventDefault method.
-            preventDefault: () => {
+            // Enzyme throws errors if we don't mock the stopPropagation method.
+            stopPropagation: () => {
                 return;
             },
             which,