Tiptap: Error On Pressing Enter Key

[ghost]

When I press enter (return/newline) in the text area ( area), I get two error messages.
**'Assertion failed: Input argument is not an HTMLInputElement'

'Uncaught TypeError: Cannot read property 'type' of undefined
at e.setFieldValue (onloadwff.js:71)
at HTMLFormElement.formKeydownListener (onloadwff.js:71)'**

I have the editor in a component, the code for which is below:

<template>
  <div class="editor" v-on:focusout="onUpdate">
    <editor-menu-bar :editor="editor" v-slot="{ commands, isActive, focused }">
      <div class="menubar" :class="{ 'is-focused': focused } + customClass">
        <button
                class="menubar__button"
                :class="{ 'is-active': isActive.bold() }"
                @click="commands.bold"
        >
          <fa icon="bold" fixed-width/>
        </button>

        <button
                class="menubar__button"
                :class="{ 'is-active': isActive.italic() }"
                @click="commands.italic"
        >
          <fa icon="italic" fixed-width/>
        </button>

        <button
                class="menubar__button"
                :class="{ 'is-active': isActive.strike() }"
                @click="commands.strike"
        >
          <fa icon="strikethrough" fixed-width/>
        </button>

        <button
                class="menubar__button"
                :class="{ 'is-active': isActive.underline() }"
                @click="commands.underline"
        >
          <fa icon="underline" fixed-width/>
        </button>

        <button
                class="menubar__button"
                :class="{ 'is-active': isActive.code() }"
                @click="commands.code"
        >
          <fa icon="code" fixed-width/>
        </button>

        <button
                class="menubar__button"
                :class="{ 'is-active': isActive.paragraph() }"
                @click="commands.paragraph"
        >
          <fa icon="paragraph" fixed-width/>
        </button>

        <button
                class="menubar__button"
                :class="{ 'is-active': isActive.heading({ level: 1 }) }"
                @click="commands.heading({ level: 1 })"
        >
          H1
        </button>

        <button
                class="menubar__button"
                :class="{ 'is-active': isActive.heading({ level: 2 }) }"
                @click="commands.heading({ level: 2 })"
        >
          H2
        </button>

        <button
                class="menubar__button"
                :class="{ 'is-active': isActive.heading({ level: 3 }) }"
                @click="commands.heading({ level: 3 })"
        >
          H3
        </button>

        <button
                class="menubar__button"
                :class="{ 'is-active': isActive.bullet_list() }"
                @click="commands.bullet_list"
        >
          <fa icon="list-ul" fixed-width/>
        </button>

        <button
                class="menubar__button"
                :class="{ 'is-active': isActive.ordered_list() }"
                @click="commands.ordered_list"
        >
          <fa icon="list-ol" fixed-width/>
        </button>

        <button
                class="menubar__button"
                :class="{ 'is-active': isActive.blockquote() }"
                @click="commands.blockquote"
        >
          <fa icon="quote-right" fixed-width/>
        </button>

        <button
                class="menubar__button"
                :class="{ 'is-active': isActive.code_block() }"
                @click="commands.code_block"
        >
          <fa icon="code" fixed-width/>
        </button>

      </div>
    </editor-menu-bar>

    <editor-content class="editor__content" :editor="editor"/>
  </div>
</template>

<script>
  import { Editor, EditorContent, EditorMenuBar } from 'tiptap'
  import {
    Blockquote,
    BulletList,
    CodeBlock,
    HardBreak,
    Heading,
    ListItem,
    OrderedList,
    TodoItem,
    TodoList,
    Bold,
    Code,
    Italic,
    Link,
    Strike,
    Underline,
    History
  } from 'tiptap-extensions'

  export default {
    name: 'TextEditor',

    props: {
      'content': {
        type: String,
        default: ''
      },
      customClass: {
        type: Object,
        default: null
      }
    },

    components: {
      EditorContent,
      EditorMenuBar
    },

    data () {
      return {
        editor: null,
        value: this.content
      }
    },

    methods: {
      async onUpdate () {
        const data = this.editor.getHTML()
        this.$emit('input', data)
      }
    },

    mounted () {
      this.editor = new Editor({
        extensions: [
          new Blockquote(),
          new BulletList(),
          new CodeBlock(),
          new HardBreak(),
          new Heading({ levels: [1, 2, 3] }),
          new ListItem(),
          new OrderedList(),
          new TodoItem(),
          new TodoList(),
          new Link(),
          new Bold(),
          new Code(),
          new Italic(),
          new Strike(),
          new Underline(),
          new History()
        ],
        content: this.value
      })
    },

    beforeDestroy () {
      this.editor.destroy()
    }
  }
</script>

I wouldn't expect there to be any errors in the console upon pressing enter.

Screenshot of the error below:

Environment

• Browser: Opera
• Version:
  "tiptap": "^1.22.6",
  "tiptap-extensions": "^1.24.0"
• Mobile / Desktop: Desktop

-- this works correctly without errors on Chrome --

[philippkuehn]

Please provide a codesandbox.

[roskelld]

I believe this is an issue with the LastPass (Password Manager) browser extension, when the Enter key is pressed on an input field.

I've just been trying to debug the issue in my own project and found this page via a search for the same error code (I'm not working with Tiptap), so I don't think this is an issue you need to resolve.

To make sure, disable the extension and retest your issue.

Have a good day!

[philippkuehn]

closed due to inactivity

[EarthlingDavey]

Late to the party, but I have Lastpass and this error. I'm not using tiptap.

My fix was to give the input field a name.

[andreasvirkus]

@daveybrown how did you accomplish that? Did you have to provide a custom template for the whole input element or is it somehow possible to provide just the name attribute?