TextField[textarea] does not support "rows" attribute

[jicksta]

In the following example, use of the rows attribute produces a compiler error because rows is a <textarea> attribute, not an <input> attribute:

<TextField textarea rows="10" label="I'm a textarea" />

The exact compiler error is:

TS2339: Property 'rows' does not exist on type 'IntrinsicAttributes & IntrinsicClassAttributes<TextField> & Readonly<{ children?: ReactNode; }> &...'.

Relevant interface from TextField.d.ts:

export interface TextFieldProps extends RMWCTagProps, InputHTMLAttributes<TextField> {
    /** A ref for the native input. */
    inputRef?: Ref<any>,
    /** Disables the input. */
    disabled?: boolean,
    /** A label for the input. */
    label?: ReactNode,
    /** Add a leading icon. */
    withLeadingIcon?: ReactNode,
    /** Add a trailing icon. */
    withTrailingIcon?: ReactNode,
    /** By default, props spread to the input. These props are for the component's root container. */
    rootProps?: object,
    /** Makes a multiline TextField. */
    textarea?: boolean,
    /** Makes the TextField fullwidth. */
    fullwidth?: boolean,
    /** Makes the TextField have a visual box. */
    box?: boolean
}

It would seem that extending InputHTMLAttributes<T> is too specific. Perhaps ideally it should extend RMWCTagProps, InputHTMLAttributes<TextField>, and TextareaHTMLAttributes<TextField>, but unfortunately this produces the following error:

TextField.d.ts(18,22): error TS2320: Interface 'TextFieldProps' cannot simultaneously extend types 'RMWCTagProps' and 'TextareaHTMLAttributes<TextField>'.
  Named property 'wrap' of types 'RMWCTagProps' and 'TextareaHTMLAttributes<TextField>' are not identical.

Changing the interface definition to instead take a rows attribute also doesn't appear to change the height of the textarea when rendered, nor does the textarea have a rows attribute when inspected in the browser DOM:

export interface TextFieldProps extends RMWCTagProps, InputHTMLAttributes<TextField> {
    // .......................................

    /** Makes a multiline TextField. */
    textarea?: boolean,
    /** Makes the TextField fullwidth. */
    fullwidth?: boolean,
    /** Makes the TextField have a visual box. */
    box?: boolean

    /** ADDED THIS: */
    rows?: number
}

I assumed rows was a prop that was getting spread to the native textarea element but apparently not.

Am I missing something here? And how would you propose allowing TextFieldProps to allow textarea attributes as well as input attributes?

[tanjaslo]

Use rows={10} instead of rows="10"