Breaking out inputProps changes

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

@@ -16,9 +16,7 @@
 
 **`Tag` appearance can be customized** with `tagProps`: supply an object to apply the same props to every tag, or supply a callback to apply dynamic props per tag. Tag `values` must be an array of strings so you may need a transformation step between your state and these props.
 
-`TagInput` provides granular `onAdd` and `onRemove` **event props**, which are passed the added or removed items in response to the user interactions above. It also provides `onChange`, which combines both events and is passed the updated `values` array, with new items appended to the end and removed items filtered away.
-
-To set a default value for the `<input>` element, supply an `inputValue` prop. Use `onInputChange` to respond to changes to the `<input>` text. Additional properties (such as custom event handlers) can be applied to the `<input>` element via `inputProps`.
+**`TagInput` provides granular `onAdd` and `onRemove` **event props**, which are passed the added or removed items in response to the user interactions above. It also provides `onChange`, which combines both events and is passed the updated `values` array, with new items appended to the end and removed items filtered away. Supply `inputProps` to customize the `<input>` element or add your own event handlers.
 
 
 <div class="pt-callout pt-intent-primary pt-icon-info-sign">

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

@@ -41,9 +41,6 @@ export interface ITagInputProps extends IProps {
     /** React props to pass to the `<input>` element */
     inputProps?: HTMLInputProps;
 
-    /** Initial value of the `<input>` element */
-    inputValue?: string;
-
     /** Name of the icon (the part after `pt-icon-`) to render on left side of input. */
     leftIconName?: IconName;
 
@@ -79,9 +76,6 @@ export interface ITagInputProps extends IProps {
      */
     onChange?: (values: React.ReactNode[]) => boolean | void;
 
-    /** Callback invoked when the value of `<input>` element is changed */
-    onInputChange?: React.FormEventHandler<HTMLInputElement>;
-
     /**
      * Callback invoked when the user depresses a keyboard key.
      * Receives the event and the index of the active tag (or `undefined` if
@@ -161,14 +155,13 @@ export class TagInput extends AbstractComponent<ITagInputProps, ITagInputState>
 
     public static defaultProps: Partial<ITagInputProps> & object = {
         inputProps: {},
-        inputValue: "",
         separator: ",",
         tagProps: {},
     };
 
     public state: ITagInputState = {
         activeIndex: NONE,
-        inputValue: this.props.inputValue,
+        inputValue: "",
         isInputFocused: false,
     };
 
@@ -320,7 +313,7 @@ export class TagInput extends AbstractComponent<ITagInputProps, ITagInputState>
 
     private handleInputChange = (event: React.ChangeEvent<HTMLInputElement>) => {
         this.setState({ activeIndex: NONE, inputValue: event.currentTarget.value });
-        Utils.safeInvoke(this.props.onInputChange, event);
+        Utils.safeInvoke(this.props.inputProps.onChange, event);
     };
 
     private handleInputKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {

packages/labs/test/tagInputTests.tsx

@@ -25,11 +25,6 @@ describe("<TagInput>", () => {
         assert.strictEqual(onBlur.args[0][0], fakeEvent);
     });
 
-    it("passes inputValue to input element", () => {
-        const input = shallow(<TagInput values={VALUES} inputValue="test-val" />).find("input");
-        assert.isTrue(input.prop("value") === "test-val");
-    });
-
     it("renders a Tag for each value", () => {
         const wrapper = mount(<TagInput values={VALUES} />);
         assert.lengthOf(wrapper.find(Tag), VALUES.length);
@@ -105,7 +100,10 @@ describe("<TagInput>", () => {
 
         it("is invoked on blur when addOnBlur is true", done => {
             const onAdd = sinon.stub();
-            const wrapper = mount(<TagInput values={VALUES} addOnBlur={true} inputValue={NEW_VALUE} onAdd={onAdd} />);
+            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(() => {
@@ -116,7 +114,7 @@ describe("<TagInput>", () => {
 
         it("is not invoked on blur when addOnBlur is false", done => {
             const onAdd = sinon.stub();
-            const wrapper = mount(<TagInput values={VALUES} inputValue={NEW_VALUE} onAdd={onAdd} />);
+            const wrapper = mount(<TagInput values={VALUES} inputProps={{ value: NEW_VALUE }} onAdd={onAdd} />);
             const fakeEvent = { flag: "yes" };
             wrapper.simulate("blur", fakeEvent);
             setTimeout(() => {
@@ -297,23 +295,6 @@ describe("<TagInput>", () => {
         });
     });
 
-    describe("onInputChange", () => {
-        it("is not invoked on enter when input is empty", () => {
-            const onInputChange = sinon.stub();
-            const wrapper = shallow(<TagInput onInputChange={onInputChange} values={VALUES} />);
-            pressEnterInInput(wrapper, "");
-            assert.isTrue(onInputChange.notCalled);
-        });
-
-        it("is invoked when input text changes", () => {
-            const changeSpy: any = sinon.spy();
-            const wrapper = shallow(<TagInput onInputChange={changeSpy} values={VALUES} />);
-            wrapper.find("input").simulate("change", { currentTarget: { value: "hello" } });
-            assert.isTrue(changeSpy.calledOnce, "onChange called");
-            assert.equal("hello", changeSpy.args[0][0].currentTarget.value);
-        });
-    });
-
     describe("onKeyDown", () => {
         it("emits the active tag index on key down", () => {
             runKeyPressTest("onKeyDown", 1, 1);