Don't clear TagInput inputValue state if controlled (#3137)

* Don't clear TagInput inputValue state if controlled Fixes #3134 * Address PR comments * Revert fixes
palantir · Nov 15, 2018 · 412f0e3 · 412f0e3 · blueprint-bot · Nov 15, 2018
1 parent 650c2f7
commit 412f0e3
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 10 deletions.
diff --git a/packages/core/src/components/tag-input/tagInput.tsx b/packages/core/src/components/tag-input/tagInput.tsx
@@ -169,9 +169,9 @@ export interface ITagInputProps extends IProps {
 }
 
 export interface ITagInputState {
-    activeIndex?: number;
-    inputValue?: string;
-    isInputFocused?: boolean;
+    activeIndex: number;
+    inputValue: string;
+    isInputFocused: boolean;
 }
 
 /** special value for absence of active tag */
@@ -184,14 +184,13 @@ export class TagInput extends AbstractPureComponent<ITagInputProps, ITagInputSta
         addOnBlur: false,
         addOnPaste: true,
         inputProps: {},
-        inputValue: "",
         separator: /[,\n\r]/,
         tagProps: {},
     };
 
     public state: ITagInputState = {
         activeIndex: NONE,
-        inputValue: this.props.inputValue,
+        inputValue: this.props.inputValue || "",
         isInputFocused: false,
     };
 
@@ -207,7 +206,7 @@ export class TagInput extends AbstractPureComponent<ITagInputProps, ITagInputSta
         super.componentWillReceiveProps(nextProps);
 
         if (nextProps.inputValue !== this.props.inputValue) {
-            this.setState({ inputValue: nextProps.inputValue });
+            this.setState({ inputValue: nextProps.inputValue || "" });
         }
     }
 
@@ -261,15 +260,15 @@ export class TagInput extends AbstractPureComponent<ITagInputProps, ITagInputSta
     }
 
     private addTags = (value: string) => {
-        const { onAdd, onChange, values } = this.props;
+        const { inputValue, onAdd, onChange, values } = this.props;
         const newValues = this.getValues(value);
-        let shouldClearInput = Utils.safeInvoke(onAdd, newValues);
+        let shouldClearInput = Utils.safeInvoke(onAdd, newValues) !== false && inputValue === undefined;
         // avoid a potentially expensive computation if this prop is omitted
         if (Utils.isFunction(onChange)) {
-            shouldClearInput = shouldClearInput || onChange([...values, ...newValues]);
+            shouldClearInput = onChange([...values, ...newValues]) !== false && shouldClearInput;
         }
         // only explicit return false cancels text clearing
-        if (shouldClearInput !== false) {
+        if (shouldClearInput) {
             this.setState({ inputValue: "" });
         }
     };

diff --git a/packages/core/test/tag-input/tagInputTests.tsx b/packages/core/test/tag-input/tagInputTests.tsx
@@ -210,6 +210,12 @@ describe("<TagInput>", () => {
             assert.strictEqual(wrapper.state().inputValue, "");
         });
 
+        it("does not clear the input if the input is controlled", () => {
+            const wrapper = mountTagInput(undefined, { inputValue: NEW_VALUE });
+            pressEnterInInput(wrapper, NEW_VALUE);
+            assert.strictEqual(wrapper.state().inputValue, NEW_VALUE);
+        });
+
         it("splits input value on separator RegExp", () => {
             const onAdd = sinon.stub();
             // this is actually the defaultProps value, but reproducing here for explicitness
@@ -356,6 +362,13 @@ describe("<TagInput>", () => {
             pressEnterInInput(wrapper, NEW_VALUE);
             assert.strictEqual(wrapper.state().inputValue, "");
         });
+
+        it("does not clear the input if the input is controlled", () => {
+            const onChange = sinon.stub();
+            const wrapper = shallow(<TagInput onChange={onChange} values={VALUES} inputValue={NEW_VALUE} />);
+            pressEnterInInput(wrapper, NEW_VALUE);
+            assert.strictEqual(wrapper.state().inputValue, NEW_VALUE);
+        });
     });
 
     describe("onKeyDown", () => {