Textarea value error with 3 options not working

[Kikketer]

🐛 Bug report

Current Behavior

The example in sandbox: https://codesandbox.io/embed/formik-example-q07ty

I'm attempting to make a simple <textarea> in a Formik form. However there are three options to do such a thing but none of them work as expected.

Option 1: Use type="textarea" as described in this ticket: #1237

• This simply doesn't work, the input is rendered as an <input type="textarea" which defaults to text since the browser doesn't know what that means

Option 2: Use a real <textarea but add value= as a prop.

• This is Reacts supported way of using textareas: https://reactjs.org/docs/forms.html#the-textarea-tag
• However this does not work either because for some reason the onChange does not fire properly and the value does not update when you type in the input box

Option 3: The HTML way of making the value the children of the text area <textarea>{values.example}</textarea>

• This throws a react error because of the previous Option 2 supported way of using textareas in React.

Expected behavior

The following code should work as a child of Formik and a form for textareas:

<textarea value={values.example} onChange={handleChange} />

Reproducible example

https://codesandbox.io/embed/formik-example-q07ty

Suggested solution(s)

I'm not sure exactly why the onChange is not being accepted and not updating the value in the textarea. But when onChange (orKeyUp) fires inside a textarea the values should be handled properly.

Additional context

Your environment

Software	Version(s)
Formik	2.0.1-rc.12
React	16.8.6
TypeScript	N/A
Browser	N/A
npm/Yarn	yarn 1.19.1
Operating System	Mac and Windows

[MappingSteve]

@Kikketer - Option 2: I suspect Formik v2 isn't compatible with that standard react mechanism, in the case of textarea, due to how formik v2 accesses its field values, vs. React DOM's special logic for textarea. I'm still trying to grasp the details - but try rewriting your test based on the code at Formik v2 Tutorial - Final - codesandbox. Note that the code is different from what is described in the Formik Tutorial. Specifically, each component does:
const [field, meta] = useField({ ...props, type: "checkbox" });
then passes field to the wrapped HTML element via:
<input className="text-input" {...field} {...props} />

I've confirmed that this works also with textarea:
https://codesandbox.io/s/formik-v2-tutorial-added-textarea-ujz18

...
<textarea className="text-area" {...field} {...props} />
...

Usage:
<MyTextArea ... name="firstName" rows="6" />

At debugger breakpoint, I see that fields is:
{ "name": "firstName", "value": ""}
I infer this is needed for Formik to correctly map between its value-storage and the HTML element's (or the virtual-DOM element's?) actual value. Or something like that.

[jaredpalmer]

Fixed in 2.x

[alainib]

any working code example with v2 please ?

i tryed :

<Field component="textarea" rows="2" id="data.project.shortDescription" name="data.project.shortDescription" variant="outlined" label="PROJECT SHORT_DESCRIPTION" />

<Field component="textarea" rows="2" cols="20" className="form-control" id="data.project.shortDescription" name="data.project.shortDescription" variant="outlined" label="PROJECT SHORT_DESCRIPTION" />

i didn't display like other input with style