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", () => {