Textarea does not render as a textarea

[aikidoshi]

🐛 Bug report

Current Behavior

If I try to use a Field of type textarea it renders as a plain single line input object, ignoring rows and no drag handle.

Expected behavior

Textarea fields should be rendered as multiline textarea field with drag handle

Reproducible example

Use the formik sandbox (https://codesandbox.io/s/zKrK5YLDZ) and change the email field to type textarea.

Your environment

Software	Version(s)
Formik	1.2.0
React	16.5
TypeScript	None
Browser	Chrome
npm/Yarn	5.6
Operating System	Windows 10

[shubh54]

Are you referring to input of type="textarea" or using textarea tag itself?
If it's the first case then you might want to refer below thread because when I am using textarea tag it seems to be working fine.
https://stackoverflow.com/questions/13089182/more-than-1-row-in-input-type-textarea

[aikidoshi]

Any advice on how I might use the Formik 'Field' with the textarea component please?

[jaredpalmer]

<Field component=“textarea” />

[jaredpalmer]

textarea is a tag and not an input type

[aikidoshi]

Thanks Jared. I'll give it go.
BTW: Love your work. Formik is very nice.

[tbarho]

Do you have an example of using textarea in a custom component, rather than the component string literal?

[jtart]

@tbarho <Field component={() => <textarea placeholder="Some placeholder">{values.someValue}</textarea>}>

[tbarho]

@jtart @jaredpalmer There is still a bug with this, so it might want to be reopened, reproduced here: https://codesandbox.io/s/vmq5pxj0ry (open the console before you try)

If you hit enter in the text area, 2 errors are thrown:

Assertion failed: Input argument is not an HTMLInputElement
getFormProfile @ onloadwff.js:71
setFieldValue @ onloadwff.js:71
formKeydownListener @ onloadwff.js:71

onloadwff.js:71 Uncaught TypeError: Cannot read property 'type' of undefined
    at e.setFieldValue (onloadwff.js:71)
    at HTMLFormElement.formKeydownListener (onloadwff.js:71)

I'm just getting started with Formik, so I might be a little noob to patch that.

Update It doesn't seem to break submission, however.

[rarira]

onloadwff.js

@tbarho aren't you using lastpass chrome extension?
if you are, please refer to KillerCodeMonkey/ngx-quill#351

I had same errors but the link helps..

[tbarho]

Yeah, definitely that. Thanks!

[hamidra]

This worked for me. set the component to "textarea" and you can define the number of rows using rows attribute

<Field
                name="messageText"
                component="textarea"
                rows="2"
              />

[vijaysadhu2016]

This worked for me. set the component to "textarea" and you can define the number of rows using rows attribute

<Field
                name="messageText"
                component="textarea"
                rows="2"
              />

Thanks!!!

[d0x1n]

<Field component=“textarea” />

this works. 👍

[NeoCortexFr]

I got same problem.
<Field component=“textarea” /> works !
Thanks a lot