[core] fix(TagInput): disable new autoResize behavior by default (#6004)

Author: adidahiya

packages/core/src/components/tag-input/resizableInput.tsx

@@ -19,7 +19,7 @@ export const ResizableInput = forwardRef<Ref, HTMLInputProps>(function Resizable
         }
     }, [content]);
 
-    const { onChange, ...otherProps } = props;
+    const { onChange, style, ...otherProps } = props;
 
     const handleInputChange: React.ChangeEventHandler<HTMLInputElement> = evt => {
         onChange?.(evt);
@@ -28,11 +28,11 @@ export const ResizableInput = forwardRef<Ref, HTMLInputProps>(function Resizable
 
     return (
         <>
-            <span ref={span} className={Classes.RESIZABLE_INPUT_SPAN}>
+            <span ref={span} className={Classes.RESIZABLE_INPUT_SPAN} aria-hidden={true}>
                 {/* Need to replace spaces with the html character for them to be preserved */}
                 {content.replace(/ /g, "\u00a0")}
             </span>
-            <input {...otherProps} type="text" style={{ width }} onChange={handleInputChange} ref={ref} />
+            <input {...otherProps} type="text" style={{ ...style, width }} onChange={handleInputChange} ref={ref} />
         </>
     );
 });

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

@@ -59,6 +59,20 @@ export interface ITagInputProps extends IntentProps, Props {
      */
     addOnPaste?: boolean;
 
+    /**
+     * Whether the component should automatically resize as a user types in the text input.
+     * This will have no effect when `fill={true}`.
+     *
+     * @default false
+     */
+    autoResize?: boolean;
+
+    /**
+     * Optional child elements which will be rendered between the selected tags and
+     * the text input. Rendering children is usually unnecessary.
+     *
+     * @default undefined
+     */
     children?: React.ReactNode;
 
     /**
@@ -76,6 +90,7 @@ export interface ITagInputProps extends IntentProps, Props {
     /**
      * React props to pass to the `<input>` element.
      * Note that `ref` and `key` are not supported here; use `inputRef` below.
+     * Also note that `inputProps.style.width` will be overriden if `autoResize={true}`.
      */
     inputProps?: HTMLInputProps;
 
@@ -204,6 +219,7 @@ export class TagInput extends AbstractPureComponent2<TagInputProps, ITagInputSta
     public static defaultProps: Partial<TagInputProps> = {
         addOnBlur: false,
         addOnPaste: true,
+        autoResize: false,
         inputProps: {},
         separator: /[,\n\r]/,
         tagProps: {},
@@ -233,7 +249,8 @@ export class TagInput extends AbstractPureComponent2<TagInputProps, ITagInputSta
     private handleRef: React.Ref<HTMLInputElement> = refHandler(this, "inputElement", this.props.inputRef);
 
     public render() {
-        const { className, disabled, fill, inputProps, intent, large, leftIcon, placeholder, values } = this.props;
+        const { autoResize, className, disabled, fill, inputProps, intent, large, leftIcon, placeholder, values } =
+            this.props;
 
         const classes = classNames(
             Classes.INPUT,
@@ -253,6 +270,21 @@ export class TagInput extends AbstractPureComponent2<TagInputProps, ITagInputSta
         const isSomeValueDefined = values.some(val => !!val);
         const resolvedPlaceholder = placeholder == null || isSomeValueDefined ? inputProps?.placeholder : placeholder;
 
+        // final props that may be sent to <input> or <ResizableInput>
+        const resolvedInputProps = {
+            value: this.state.inputValue,
+            ...inputProps,
+            className: classNames(Classes.INPUT_GHOST, inputProps?.className),
+            disabled,
+            onChange: this.handleInputChange,
+            onFocus: this.handleInputFocus,
+            onKeyDown: this.handleInputKeyDown,
+            onKeyUp: this.handleInputKeyUp,
+            onPaste: this.handleInputPaste,
+            placeholder: resolvedPlaceholder,
+            ref: this.handleRef,
+        };
+
         return (
             <div className={classes} onBlur={this.handleContainerBlur} onClick={this.handleContainerClick}>
                 <Icon
@@ -263,19 +295,7 @@ export class TagInput extends AbstractPureComponent2<TagInputProps, ITagInputSta
                 <div className={Classes.TAG_INPUT_VALUES}>
                     {values.map(this.maybeRenderTag)}
                     {this.props.children}
-                    <ResizableInput
-                        value={this.state.inputValue}
-                        {...inputProps}
-                        onFocus={this.handleInputFocus}
-                        onChange={this.handleInputChange}
-                        onKeyDown={this.handleInputKeyDown}
-                        onKeyUp={this.handleInputKeyUp}
-                        onPaste={this.handleInputPaste}
-                        placeholder={resolvedPlaceholder}
-                        ref={this.handleRef}
-                        className={classNames(Classes.INPUT_GHOST, inputProps?.className)}
-                        disabled={disabled}
-                    />
+                    {autoResize ? <ResizableInput {...resolvedInputProps} /> : <input {...resolvedInputProps} />}
                 </div>
                 {this.props.rightElement}
             </div>

packages/core/test/tag-input/tagInputTests.tsx

@@ -565,6 +565,25 @@ describe("<TagInput>", () => {
         });
     });
 
+    describe("when autoResize={true}", () => {
+        it("passes inputProps to input element", () => {
+            const onBlur = sinon.spy();
+            const input = mount(
+                <TagInput autoResize={true} values={VALUES} inputProps={{ autoFocus: true, onBlur }} />,
+            ).find("input");
+            assert.isTrue(input.prop("autoFocus"));
+            // check that event handler is proxied
+            const fakeEvent = { flag: "yes" };
+            input.prop("onBlur")?.(fakeEvent as any);
+            assert.strictEqual(onBlur.args[0][0], fakeEvent);
+        });
+
+        it("renders a Tag for each value", () => {
+            const wrapper = mount(<TagInput autoResize={true} values={VALUES} />);
+            assert.lengthOf(wrapper.find(Tag), VALUES.length);
+        });
+    });
+
     function pressEnterInInput(wrapper: ReactWrapper<any, any>, value: string) {
         wrapper.find("input").prop("onKeyDown")?.(createInputKeydownEventMetadata(value, Keys.ENTER) as any);
     }

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

@@ -37,6 +37,7 @@ const VALUES = [
 export interface ITagInputExampleState {
     addOnBlur: boolean;
     addOnPaste: boolean;
+    autoResize: boolean;
     disabled: boolean;
     fill: boolean;
     intent: Intent;
@@ -51,6 +52,7 @@ export class TagInputExample extends React.PureComponent<ExampleProps, ITagInput
     public state: ITagInputExampleState = {
         addOnBlur: false,
         addOnPaste: true,
+        autoResize: false,
         disabled: false,
         fill: false,
         intent: "none",
@@ -65,6 +67,8 @@ export class TagInputExample extends React.PureComponent<ExampleProps, ITagInput
 
     private handleAddOnPasteChange = handleBooleanChange(addOnPaste => this.setState({ addOnPaste }));
 
+    private handleAutoResizeChange = handleBooleanChange(autoResize => this.setState({ autoResize }));
+
     private handleDisabledChange = handleBooleanChange(disabled => this.setState({ disabled }));
 
     private handleFillChange = handleBooleanChange(fill => this.setState({ fill }));
@@ -118,14 +122,16 @@ export class TagInputExample extends React.PureComponent<ExampleProps, ITagInput
     private renderOptions() {
         return (
             <>
-                <H5>Props</H5>
+                <H5>Appearance props</H5>
                 <Switch label="Large" checked={this.state.large} onChange={this.handleLargeChange} />
                 <Switch label="Disabled" checked={this.state.disabled} onChange={this.handleDisabledChange} />
                 <Switch label="Left icon" checked={this.state.leftIcon} onChange={this.handleLeftIconChange} />
-                <Switch label="Add on blur" checked={this.state.addOnBlur} onChange={this.handleAddOnBlurChange} />
-                <Switch label="Add on paste" checked={this.state.addOnPaste} onChange={this.handleAddOnPasteChange} />
                 <Switch label="Fill container width" checked={this.state.fill} onChange={this.handleFillChange} />
                 <IntentSelect intent={this.state.intent} onChange={this.handleIntentChange} />
+                <H5>Behavior props</H5>
+                <Switch label="Add on blur" checked={this.state.addOnBlur} onChange={this.handleAddOnBlurChange} />
+                <Switch label="Add on paste" checked={this.state.addOnPaste} onChange={this.handleAddOnPasteChange} />
+                <Switch label="Auto resize" checked={this.state.autoResize} onChange={this.handleAutoResizeChange} />
                 <H5>Tag props</H5>
                 <Switch
                     label="Use minimal tags"