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

Created on 12 Mar 2019  路  12Comments  路  Source: mui-org/material-ui

  • [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. | - |

TextField external dependency

Most helpful comment

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

All 12 comments

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

@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.

Capture d鈥檈虂cran 2019-03-12 a虁 23 52 33

@oliviertassinari got it!

Thanks everyone for taking the time to look at this! 馃憦

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

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.

@sfanculatodinotte Thanks!

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:

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

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

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)?

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.

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

<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

Was this page helpful?
0 / 5 - 0 ratings