Ngx-quill: Error when hitting enter when attached to form control

[carlhussey]

I am using a very basic editor attached to a form control. I see the editor and the toolbar and the buttons work within it.

As soon as I hit enter within the editor, I get the following error to the console.

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)

I dont have my own example but I was looking at another page that has different setups for the editor and I get the same issue on theirs.

https://killercodemonkey.github.io/ngx-quill-example/

If you type in the "Reactive Forms and Path Value" editor and just hit enter, it should throw the error.

[KillerCodeMonkey]

do you use some browser addons?
I do not know that script:
onloadwff.js:71

Do you using the chrome LastPass Plugin?
https://github.com/vuejs/vue-cli/issues/236#issuecomment-262287678

And when i am using my example there is no error (tested in ff, chrome and safari):

[dcsan]

this is lastPass POS

[mnahkies]

Does anyone know of a general workaround for this? (aside from disabling lastpass)

[dangxuanphuc]

I fixed this error by right click on the extension, then select "This Can Read and Change Site Data". Then select "When You Click the Extension".

[KillerCodeMonkey]

@dangxuanphuc thanks for your Info. I think this will help a lot of people :)

[mnahkies]

@dangxuanphuc I actually meant workaround from the development side - I've ended up solving this in my project by stopping keypress event propagation on the affected form. (event.stopPropagation())

Can't see any similar event handlers in the ngx-quill codebase, so would probably need something similar done in quill itself to prevent it.

[KillerCodeMonkey]

Some Browser Plugins are attaching eventlisteners to Inputs and Elements
with "contenteditable" Attribute.

Or you have global listeners in your App?

Michael Nahkies [e-mail] schrieb am Fr., 22. März 2019,
02:23:

@dangxuanphuc https://github.com/dangxuanphuc I actually meant
workaround from the development side - I've ended up solving this in my
project by stopping keypress event propagation on the affected form. (
event.stopPropagation())

Can't see any similar event handlers in the ngx-quill codebase, so would
probably need something similar done in quill itself to prevent it.

—
You are receiving this because you modified the open/close state.
Reply to this email directly, view it on GitHub
https://github.com/KillerCodeMonkey/ngx-quill/issues/351#issuecomment-475461387,
or mute the thread
https://github.com/notifications/unsubscribe-auth/ACKOYLUuiaeMLUWhRr1uOktMTDjuxCDMks5vZDCggaJpZM4bkdSf
.

[mnahkies]

@KillerCodeMonkey my form looks something like:

      <form ngForm [formGroup]="myFormGroup" autocomplete="off">
        <mat-form-field color="accent">
          <textarea matInput matTextareaAutosize
            formControlName="content"
            placeholder="something"
            (keydown.enter)="textareaEnterPressed($event)"
          ></textarea>
        </mat-form-field>
      </form>

With the event handler looking like:

textareaEnterPressed($event: KeyboardEvent): boolean {
    $event.preventDefault()
    $event.stopPropagation()

    // handle form submission
  }

I haven't spent any time understanding why the last pass extension is throwing an exception if I let it receive this event, but preventing it from getting the event with $event.stopPropagation() has solved the ugly error in the console, and fits with my use case fine. Also haven't worked out where the extension is attaching the event listener

[johnjcamilleri]

If you don't have any extra logic to add and just want to shut up LastPass without disabling it, you can even just do this:

<form>
 <textarea v-on:keydown.enter="$event.stopPropagation()">...</textarea>
</form>

[j-berman]

Above fixes weren't working for me with React, but I got it working by adding my own event listener to the DOM

My form looks like this:

<form>
  <input
    name='my-input'
    type='text'
    value={myInput}
    onClick={this.handleChangeInput}
  />

  <input
    type='submit'
    onClick={this.handleSubmit}
  />
</form>

Adding the following to my component worked:

componentWillMount () {
  document.addEventListener('keydown', this.handleHitEnter, true)
}

componentWillUnmount() {
  document.removeEventListener('keydown', this.handleHitEnter, true)
}

handleHitEnter(e) {
  const ENTER_KEY_CODE = 13
  if (e.target.name === 'my-input' &&
     (e.key === 'Enter' || e.keyCode === ENTER_KEY_CODE)) {
      e.stopPropagation()
  }
}

handleChangeInput(e) {
  this.setState({ myInput: e.target.value })
}

handleSubmit(e) {
  // e.stopPropagation() // doesn't work because LastPass handles the keydown event first before propagating to this handler

  ... code to handle form submission ...
}

I tried adding lots of different handlers in different spots in my form, but nothing worked because LastPass would handle the keydown event first before propagating to any handlers I would write (rather than the other way around as I think must be the case with you guys^). I'm not sure why this was happening with React

Edit: also sorry for including the above in this repo -- I know it doesn't really apply to ngx-quill. I found this issue via a google search and the explanations for the issue above were the best I found around the web. So leaving this here for anyone else who may stumble across it like me

[KillerCodeMonkey]

Dude this is a angular Module... Nothing mentioned that IT would Work with
react?

j-berman [e-mail] schrieb am Fr., 12. Juli 2019, 21:26:

Above fixes weren't working for me with React, but I got it working by
adding my own event listener to the DOM

My form looks like this:

Adding the following to my component worked:

componentWillMount () {
document.addEventListener('keydown', this.handleHitEnter, true)
}

componentWillUnmount() {
document.removeEventListener('keydown', this.handleHitEnter, true)
}

handleHitEnter(e) {
const ENTER_KEY_CODE = 13
if (e.target.name === 'my-input' &&
(e.key === 'Enter' || e.keyCode === ENTER_KEY_CODE)) {
e.stopPropagation()
}
}

handleChangeInput(e) {
this.setState({ myInput: e.target.value })
}

handleSubmit(e) {
// e.stopPropagation() // doesn't work because LastPass handles the keydown event first before propagating to this handler

... code to handle form submission ...
}

I tried adding lots of different handlers in different spots in my form,
but nothing worked because LastPass would handle the keydown event first
before propagating to any handlers I would write (rather than the other way
around as I think must be the case with you guys^). I'm not sure why this
was happening with React

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/KillerCodeMonkey/ngx-quill/issues/351?email_source=notifications&email_token=AARI4YEWQW632SAECZYJ6F3P7DLGXA5CNFSM4G4R2SP2YY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGODZ2VE5Y#issuecomment-511005303,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AARI4YCPKXTQF5ZPPMXG2QLP7DLGXANCNFSM4G4R2SPQ
.

[j-berman]

@KillerCodeMonkey haha ya I realized, see my edit. The issue is universal though and affects everyone regardless of frontend framework. The (really good) explanations provided above apply to React too albeit with the minor difference I mentioned. I think there's a solid chance others using React have come across this git issue by google searching like me -- it's the best one I came across that helped me understand the issue

[gegorov]

@KillerCodeMonkey, @j-berman it doesn't matter. react or angular, it is Web API. In my case using event.stopPropagation() didn't solve the problem.
But at the same time stopImmidiatePropagation() worked perfectly. it looks like that lastPass is setting listeners on the same level. and we need to avoid other listeners to be called. more about stopImmidiatePropagation on MDN

[kroyee]

I got this same issue while using react-bootstrap. Adding an empty type to the Form element solved it for me.

<Form type=""> ... </Form>

[shayneoneill]

For what its worth, I'm getting this same error in the ractive.js framework. So I don't think its anything you guys specifically are doing.

[KillerCodeMonkey]

But again... This is an angular module... And it is working with angular in
an angular context and model oder template driven forms.

If you need that as native webcomponent please checkout my stencil-quill
repo.

shayneoneill [e-mail] schrieb am Sa., 25. Jan. 2020,
06:43:

For what its worth, I'm getting this same error in the ractive.js
framework. So I don't think its anything you guys specifically are
doing.

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/KillerCodeMonkey/ngx-quill/issues/351?email_source=notifications&email_token=AARI4YF2EW3O37I66LZVFGLQ7PGRDA5CNFSM4G4R2SP2YY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOEJ4V5PA#issuecomment-578379452,
or unsubscribe
https://github.com/notifications/unsubscribe-auth/AARI4YA6LNFUYXXVVDMNGT3Q7PGRDANCNFSM4G4R2SPQ
.

[mariordev]

Does anyone know of a general workaround for this? (aside from disabling lastpass)

Here's a workaround I found:

1. Assign an id to the form.
2. Move all form input elements and button(s) so that they are outside of the form element.
3. Use the form attribute on all form field elements. This lets you associate fields with the form, without requiring the fields to be inside the form element.

Like so:

<form id="form-user-edit"></form>

<input type="text" name="first_name" form="form-user-edit">
<button type="submit" form="form-user-edit">Submit</button>

It looks a bit funny having form elements outside the form, but it is valid markup, and it's a workaround to this issue. Lastpass should really fix this issue though.

More info: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefform

[bwilson]

Thanks @mariordev, that worked for me!

[shayneoneill]

This really needs to be something Lastpass fixes since it seems to be the cause of this in multiple frameworks :/ Because yeah you can stick your fields outside a form, but its not very hygenic.

[mariordev]

Yeah, @shayneoneill, I completely agree. Lastpass should definitely own up to it and fix this issue. This is not an ideal solution, but simply a workaround (as someone asked if there was a general workaround, and this is one that I found).

[thalaeg]

You can likely add data-lpignore="true" to your form element.. so

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

Check out this stack overflow thread for info on ignoring last pass stuff