Why the input cannot focus

I have a NodeSpec like this:

new Schema({
     'filling-input': {
        inline: true,
        group: 'inline',
        attrs: {
          filling: {},
        },
        parseDOM: [{
          tag: "input[filling]", getAttrs(dom) {
            return {
              src: dom.getAttribute("filling"),
            }
          }
        }],
        toDOM(node) {
          return ["input", node.attrs]
        }
      }
});

then i create a Node and use it to update view:

let node = this.editor.schema.node('filling-input', {
     filling: 'true'
});
let transaction = this.editor.state.tr.replaceSelectionWith(node);
let newState = this.editor.state.apply(transaction);
this.editor.view.updateState(newState);

but i found the input cannot be focus. please help me. thanks

I don’t know what might be going on—having a document with just a paragraph with an inline leaf node seems to not interfere with focus if I try it in the dino example (of course, you didn’t mention which browser you are using, so that might be a factor).

I try chrome, Firefox and Safari, all has the problem. when i mouse down, the cursor is in the input, then i mouse up, it blur automatically. i am using tiptap, i don’t know whether it’s the problem of tiptap :joy:

image

1 Like

Hello, it’s my fault. I should add content: 'text*' in the nodeSpec. but now I have another problem. When the input box is focused, I type something in, and then when I press the left (or right) key on the keyboard, the cursor doesn’t move and I have to hit the left (or right) key several times before the cursor moves.


I know now, should add selectable: false in the nodeSpac.