[core] feat(InputGroup): new prop onValueChange

packages/core/src/components/forms/inputGroup.tsx

@@ -40,6 +40,16 @@ export interface InputGroupProps
     /** Whether this input should use large styles. */
     large?: boolean;
 
+    /**
+     * Callback invoked when the input value changes, typically via keyboard interactions.
+     *
+     * Using this prop instead of `onChange` can help avoid common bugs in React 16 related to Event Pooling
+     * where developers forget to save the text value from a change event or call `event.persist()`.
+     *
+     * @see https://legacy.reactjs.org/docs/legacy-event-pooling.html
+     */
+    onValueChange?(value: string, targetElement: HTMLInputElement | null): void;
+
     /** Whether this input should use small styles. */
     small?: boolean;
 
@@ -66,6 +76,8 @@ export interface InputGroupState {
     rightElementWidth?: number;
 }
 
+const NON_HTML_PROPS: Array<keyof InputGroupProps> = ["onValueChange"];
+
 /**
  * Input group component.
  *
@@ -120,8 +132,9 @@ export class InputGroup extends AbstractPureComponent<InputGroupProps, InputGrou
         };
         const inputProps = {
             type: "text",
-            ...removeNonHTMLProps(this.props),
+            ...removeNonHTMLProps(this.props, NON_HTML_PROPS, true),
             className: classNames(Classes.INPUT, inputClassName),
+            onChange: this.handleInputChange,
             style,
         };
         const inputElement = asyncControl ? (
@@ -156,6 +169,12 @@ export class InputGroup extends AbstractPureComponent<InputGroupProps, InputGrou
         }
     }
 
+    private handleInputChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+        const value = event.target.value;
+        this.props.onChange?.(event);
+        this.props.onValueChange?.(value, event.target);
+    };
+
     private maybeRenderLeftElement() {
         const { leftElement, leftIcon } = this.props;
 

packages/core/src/components/forms/numericInput.tsx

@@ -456,12 +456,12 @@ export class NumericInput extends AbstractPureComponent<HTMLInputProps & Numeric
                 leftIcon={this.props.leftIcon}
                 onFocus={this.handleInputFocus}
                 onBlur={this.handleInputBlur}
-                onChange={this.handleInputChange}
                 onCompositionEnd={this.handleCompositionEnd}
                 onCompositionUpdate={this.handleCompositionUpdate}
                 onKeyDown={this.handleInputKeyDown}
                 onKeyPress={this.handleInputKeyPress}
                 onPaste={this.handleInputPaste}
+                onValueChange={this.handleInputChange}
                 rightElement={this.props.rightElement}
                 small={this.props.small}
                 value={this.state.value}
@@ -616,8 +616,7 @@ export class NumericInput extends AbstractPureComponent<HTMLInputProps & Numeric
         this.props.onPaste?.(e);
     };
 
-    private handleInputChange = (e: React.FormEvent) => {
-        const { value } = e.target as HTMLInputElement;
+    private handleInputChange = (value: string) => {
         let nextValue = value;
         if (this.props.allowNumericCharactersOnly && this.didPasteEventJustOccur) {
             this.didPasteEventJustOccur = false;

packages/core/test/controls/inputGroupTests.tsx

@@ -99,4 +99,18 @@ describe("<InputGroup>", () => {
         // value should not change because our change handler prevents it from being longer than characters
         assert.strictEqual(input.prop("value"), "abc");
     });
+
+    it("supports the onValueChange callback", () => {
+        const initialValue = "value";
+        const newValue = "new-value";
+        const handleValueChange = spy();
+        const inputGroup = mount(<InputGroup value={initialValue} onValueChange={handleValueChange} />);
+        assert.strictEqual(inputGroup.find("input").prop("value"), initialValue);
+
+        inputGroup
+            .find("input")
+            .simulate("change", { currentTarget: { value: newValue }, target: { value: newValue } });
+        assert.isTrue(handleValueChange.calledOnce, "onValueChange not called");
+        assert.isTrue(handleValueChange.calledWithMatch(newValue), `onValueChange not called with '${newValue}'`);
+    });
 });

packages/docs-app/src/components/icons.tsx

@@ -58,8 +58,8 @@ export class Icons extends React.PureComponent<IconsProps, IconsState> {
                     className={Classes.FILL}
                     large={true}
                     leftIcon="search"
+                    onValueChange={this.handleFilterChange}
                     placeholder="Search for icons..."
-                    onChange={this.handleFilterChange}
                     type="search"
                     value={this.state.filter}
                 />
@@ -100,10 +100,7 @@ export class Icons extends React.PureComponent<IconsProps, IconsState> {
         return icons.filter(icon => iconFilter(this.state.filter, icon));
     }
 
-    private handleFilterChange = (e: React.SyntheticEvent<HTMLInputElement>) => {
-        const filter = (e.target as HTMLInputElement).value;
-        this.setState({ filter });
-    };
+    private handleFilterChange = (filter: string) => this.setState({ filter });
 }
 
 function isIconFiltered(query: string, icon: Icon) {

packages/docs-app/src/examples/core-examples/breadcrumbsExample.tsx

@@ -142,8 +142,5 @@ export class BreadcrumbsExample extends React.PureComponent<ExampleProps, Breadc
 
 const BreadcrumbInput: React.FC<BreadcrumbProps & { defaultValue: string | undefined }> = props => {
     const [text, setText] = React.useState(props.defaultValue ?? "");
-    const handleChange = React.useCallback((event: React.FormEvent<HTMLInputElement>) => {
-        setText((event.target as HTMLInputElement).value);
-    }, []);
-    return <InputGroup placeholder="rename me" value={text} onChange={handleChange} />;
+    return <InputGroup placeholder="rename me" value={text} onValueChange={setText} />;
 };

packages/docs-app/src/examples/core-examples/fileInputExample.tsx

@@ -48,24 +48,20 @@ export class FileInputExample extends React.PureComponent<ExampleProps, FileInpu
             <>
                 <H5>Props</H5>
                 <FormGroup label="Text">
-                    <InputGroup placeholder="Choose file..." onChange={this.handleTextChange} value={text} />
+                    <InputGroup placeholder="Choose file..." onValueChange={this.handleTextChange} value={text} />
                 </FormGroup>
                 <FormGroup label="Button text">
-                    <InputGroup placeholder="Browse" onChange={this.handleButtonTextChange} value={buttonText} />
+                    <InputGroup placeholder="Browse" onValueChange={this.handleButtonTextChange} value={buttonText} />
                 </FormGroup>
                 <Switch label="Large" onChange={this.handleLargeChange} checked={large} />
                 <Switch label="Small" onChange={this.handleSmallChange} checked={small} />
             </>
         );
     };
 
-    private handleTextChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-        this.setState({ text: e.target.value });
-    };
+    private handleTextChange = (text: string) => this.setState({ text });
 
-    private handleButtonTextChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-        this.setState({ buttonText: e.target.value });
-    };
+    private handleButtonTextChange = (buttonText: string) => this.setState({ buttonText });
 
     private handleSmallChange = handleBooleanChange(small => this.setState({ small, ...(small && { large: false }) }));
 

packages/docs-app/src/examples/core-examples/tabsExample.tsx

@@ -145,7 +145,7 @@ export class TabsExample extends React.PureComponent<ExampleProps, TabsExampleSt
                     <Tab id="mb" title="Ember" panel={<EmberPanel />} panelClassName="ember-panel" />
                     <Tab id="bb" disabled={true} title="Backbone" panel={<BackbonePanel />} />
                     <Tabs.Expander />
-                    <InputGroup className={Classes.FILL} type="text" placeholder="Search..." />
+                    <InputGroup fill={true} type="text" placeholder="Search..." />
                 </Tabs>
             </Example>
         );