Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Error when hitting enter when attached to form control #351

Closed
carlhussey opened this issue Mar 8, 2019 · 12 comments

Comments

@carlhussey
Copy link

commented Mar 8, 2019

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

This comment has been minimized.

Copy link
Owner

commented Mar 8, 2019

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

Do you using the chrome LastPass Plugin?
vuejs/vue-cli#236 (comment)

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

bildschirmfoto 2019-03-08 um 07 02 52

@dcsan

This comment has been minimized.

Copy link

commented Mar 14, 2019

this is lastPass POS

@mnahkies

This comment has been minimized.

Copy link

commented Mar 15, 2019

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

@dangxuanphuc

This comment has been minimized.

Copy link

commented Mar 21, 2019

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

This comment has been minimized.

Copy link
Owner

commented Mar 21, 2019

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

@mnahkies

This comment has been minimized.

Copy link

commented Mar 22, 2019

@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

This comment has been minimized.

Copy link
Owner

commented Mar 22, 2019

@mnahkies

This comment has been minimized.

Copy link

commented Mar 25, 2019

@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

This comment has been minimized.

Copy link

commented Apr 17, 2019

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

This comment has been minimized.

Copy link

commented Jul 12, 2019

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

This comment has been minimized.

Copy link
Owner

commented Jul 12, 2019

@j-berman

This comment has been minimized.

Copy link

commented Jul 12, 2019

@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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
7 participants
You can’t perform that action at this time.