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

[npapagna]

• This is not a v0.x issue.
• 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.

[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 ☺️

[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

[janderson215]

FYI, the thing that has worked best for me to prevent the LastPass adornment from being added to elements is adding inputProps={{ 'data-lpignore': true }} to <TextField>. I'm currently having an issue with that solution on a <TextField> being used as the renderInput in an <Autocomplete>. The attribute does not show in the inspector, and even when manually adding the data-lpignore attribute on the input element, this solution does not work. This is a very low priority for me, so I won't be digging into again for a while. If anyone has suggestions of how to prevent this on an <Autocomplete> <TextField>, I would be very appreciative.

[oliviertassinari]

@janderson215 On the Autocomplete, you need to spread the params:

    <Autocomplete
      renderInput={(params) => (
        <TextField
          {...params}
          label="Choose a country"
          inputProps={{
            ...params.inputProps,
            'data-lpignore': true,
          }}
        />
      )}
    />

[janderson215]

@janderson215 On the Autocomplete, you need to spread the params:

    <Autocomplete
      renderInput={(params) => (
        <TextField
          {...params}
          label="Choose a country"
          inputProps={{
            ...params.inputProps,
            'data-lpignore': true,
          }}
        />
      )}
    />

That worked, thank you! You're the man!

[Filip1986]

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

AAAAAAaaaaaaaaaaaa!!!!!! It's one of those days when the first click that you make regarding an issue takes you to the right spot.

[geochronology]

Disabling lastpass on localhost seems to have changed from @gdarchen's instructions.

How to do now:

1. Click extension and go to "Open my vault"
2. Navigate to Account Settings
3. Go to "Never URLs" tab
4. Add "http://localhost" and for Type choose "Never Do Anything"

[oliviertassinari]

As a side note. LastPass has significantly reduced the interest of its free plan recently, with only one device now. It seems that a large chunk of the audience has moved to https://bitwarden.com/. They have x3 their user base in 3 months:

https://www.similarweb.com/website/bitwarden.com

[spooksie]

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

MFing LastPass wasted an hour of my time... disabled the extension and the problem disappeared. Thanks buddy.

[Sti2nd]

If you want to tell LastPass to fix it, here is where the issue is reported: https://community.logmein.com/t5/LastPass-Support-Discussions/onloadwff-js-Assertion-failed-Input-argument-is-not-an-HTML/m-p/246491

You have to sign up for a new account to vote up 🙁

[swyxio]

still experiencing this in the year of our lord 2023 lmao lastpass is just shit

[locvfx]

Lastpass was really good back then, but recently it becomes worst ever, slow performance, and many tricks to enforce users to upgrade account.