Material-ui: onloadwff.js:71 Assertion failed: Input argument is not an HTMLInputElement

[npapagna]

• [x] This is not a v0.x issue.
• [x] I have searched the issues of this repository and believe that this is not a duplicate.

Expected Behavior 🤔

There should be no console errors when using TextField with multiline={true}

Current Behavior 😯

When rendering a multiline TextField (within a form) and hitting the enter key , the following is logged to the console (each time the key is pressed):

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)

Steps to Reproduce 🕹

1. Browse to https://material-ui.com/demos/text-fields/ and open Chrome's Dev Console (
2. Under the "TextField" section, click any multiline control and hit the enter key a couple times
3. Notice the exceptions logged to the console

I could reproduce this bug in Chrome (both Ubuntu 18 and WIndows 10).
Could not reproduce it in Firefox (Ubuntu and Windows).

I have the same issue in my project and found out it is present also in Material-U's web page.

Note the bug does not show when the multiline textfield is not wrapped in a form tag

Context 🔦

Not much context here, just rendered a multiline textfield and found out these exceptions logged to the console.

Your Environment 🌎

| Tech | Version |
|--------------|---------|
| Material-UI | v3.0.1 and v.3.9.2 |
| React | 16.6.3 |
| Browser | Chrome, Firefox (both latest) |
| TypeScript | no |
| etc. | - |

[oliviertassinari]

Who is using LastPass? Raise your hand! (onloadwff.js)

[oliviertassinari]

@npapagna It's a recent LastPass regression. I highly doubt we could have had this type of problem for that long unaddressed. You can try with a native <textarea />, same reproduction.

[npapagna]

@oliviertassinari got it!

Thanks everyone for taking the time to look at this! 👏

[avalanche1]

Cool! But how to get rid of it, keeping the extension at the same time?

[expelliamus]

Cool! But how to get rid of it, keeping the extension at the same time?

There is no official fix for this, anyway a possible workaround is the following:

1. Right click on LastPass extension
2. Select "This Can Read and Change Site Data".
3. Then select "When You Click the Extension".

Reload the page, you will see the error will disappear.

Kind regards.

[A-Atrash]

@sfanculatodinotte Thanks!

[gdarchen]

Cool! But how to get rid of it, keeping the extension at the same time?

Hello!

You can also exclude the URL as follows:

1. Go on LastPass and connect to your account
2. Go in the Account parameters section
3. Navigate to the URL Exclusions tab
4. Add an exclusion for your page such as http://localhost

Hope this helps!

Best regards :relaxed:

[duongricky]

Who is using LastPass? Raise your hand! (_onloadwff.js_)

:D, the best answer for me, thank you so much :)))

[Floriferous]

Well it's nice if you're the user, just disable lastpass, but we're all developers here right? So what can we do to prevent our forms from being broken for our users who do use LastPass (and who will never find this github issue)?

[oliviertassinari]

To be clear, this error doesn't break anything on the page, it's noise for developers. If you want to get it fixed, contact LastPass support, the more requests, the more likely they will prioritize it.

[Floriferous]

My bad, I had another weird error that caused my input to bug, this error is indeed just noise.

[velusgautam]

<textarea class="form-control" id="messageBody"
            onkeypress={supressEnterPropagation}
            name="body"
            rows="18"
          ></textarea>

const supressEnterPropagation = (event) {
    if (event.which === 13 || event.keyCode === 13 || event.key === "Enter")
        event.stopPropagation()
     }
}

You got the idea. Its the sudo code