TextareaAutosize With Formik?

Question

I am using react-textarea-autosize and formik and I am wondering how to properly hook the change events of formik to TextareaAutosize?

   <Formik
          initialValues={{
            description: ''
          }}
          validationSchema={Yup.object().shape({

          })}
          onSubmit={(values, { setSubmitting, setErrors }) => {
            console.log('v', values)

          }}
          render={props => (
            <Form autoComplete="off">
              <div className="field">
                <label className="label">Description</label>
                <div className="control">
                  <TextareaAutosize
                    className="input"
                    onChange={props.handleChange}
                    onBlur={props.handleBlur}
                    name="description"
                    value={props.values.description}
                  />
                </div>
              </div>

            </Form>
          )}

So when I do an onSubmit, I do see the data that is entered in the textarea but when I do an "enter" in the textarea I get these errors

onloadwff.js:71 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)
setFieldValue @ onloadwff.js:71
formKeydownListener @ onloadwff.js:71

Answer 1

funny, I had this as well, it is not related to Formik whatsoever, onloadwff.js is related to lastpass, and this error is thrown from the chrome extension :]

Answer 2

This is an error from the Lastpass plugin/extension.

I found some ways to solve this issue. One is via the Lastpass plugin/extension itself.

Via Lastpass

Add an exception on this URL

1. Click extension and go to "Open my vault"
2. Navigate to Account Settings
3. Go to the "Never URLs" tab
4. Add "http://localhost" (or the URL you are using) and for Type choose "Never Do Anything"

Via code

If you want to solve it via code (so it wouldn't happen for anyone, in case you are deploying the app to production), there are other ways.

Add data-lpignore="true" attribute to the form element

Example:

<form data-lpignore="true"> 
  ... 
</form>

In your case, the form would be something like this:

            <Form autoComplete="off" data-lpignore="true">
              <div className="field">
                <label className="label">Description</label>
                <div className="control">
                  <TextareaAutosize
                    className="input"
                    onChange={props.handleChange}
                    onBlur={props.handleBlur}
                    name="description"
                    value={props.values.description}
                  />
                </div>
              </div>

            </Form>

Stop the event propagation

Event Listener

Create a listener for the keydown event and stop the propagation there for the Enter key (which seems to be the one Lastpass listens to) with event.stopPropagation():

document.addEventListener('keydown', handleHitEnter, true);
    
function handleHitEnter(event: globalThis.KeyboardEvent) {
  if (event && event.key === "Enter") {
    event.stopPropagation();
  }
}

I have also seen people stopping the propagation with event handlers, but in my case, nothing worked because LastPass would handle the keydown event first before propagating to any handlers. But I will add it here as another option

Event Handler

Event Handler for Angular:

<textarea matInput matTextareaAutosize
 formControlName="description"
 (keydown.enter)="enterEventHandler($event)"
></textarea>

And the enterEventHandler like this:

enterEventHandler($event: KeyboardEvent): boolean {
  $event.stopPropagation()
  // handle form submission
}

Event handler for React:

<textarea
  className="input"
  name="description"
  onKeyDown={event => enterEventHandler(event)}
/>

function enterEventHandler(event: KeyboardEvent<HTMLButtonElement>) {
  if (event && event.key === "Enter") {
    event.stopPropagation();
  }
}

References:

1. Error when hitting enter... Github discussion
2. Stop LastPass filling out a form StackOverflow discussion

Answer 3

import { Form, Formik, Field as FormikField } from "formik";
...
const TextAreaField = ({maxRows, minRows, ...props}) => {
   return (
    <FormikField
      {...props}
    >
      {({ field }) => <TextareaAutosize maxRows={maxRows} minRows={} {...field} />}
    </FormikField>
   );
}
...
const MyForm = () => {
   ...
   return (
    <Formik
        initialValues={{
          ...
        }}
        onSubmit={handleSubmit}
    >
      <Form>
         <TextAreaField
           name="about"
           maxRows={maxRows} 
           minRows={minRows}
         />
      </Form>
    </Formik>
   );
};

It works for me