Input field inside inline node

1

Hello all,

I’m trying to do something a bit exotic with inline elements and I was hoping you could tell me if this is even possible because I’m not having any luck getting it working.

I’m trying to create an inline element that has 2 child inline elements, each of which contain text. When you click on either of the child elements, they turn into input elements with autocomplete menus. After pressing the Enter key, they go back to being text, keeping the new values from the input elements.

The document is basically this

<p>
    <field>
        <field-type>Status</field-type>
        <field-value>Read</field-value>
    </field>
</p>

I have a NodeView for the field element that takes care of rendering the 2 child elements and registering event listeners on them.

Before I bore you with the details of the many things that I’ve tried and discarded, should I expect this to work at all? Or should I consider this unsupported?

2

I don’t immediately see a reason why this wouldn’t work.

3

That’s encouraging. The issue I’m stuck on right now is that I can’t focus the input element, either programmatically or by clicking on it.

I put together a minimal example here: http://kind-cone.glitch.me. I’d appreciate it if you could have a look and point out my newbie error.

4

After much trial and error, I got it working. I had to add this listener for inputValue and inputType.

  inputValue.addEventListener('mousedown', (e) => {
    // If we don't do this, we can't click the input. No idea why.
    e.preventDefault();
    return false;
  });
5

The problem, in your example, is that your own mousedown handlers (registered when creating the node view) are constantly recreating the input element on each mouse click.

After fixing that, you might also want to add an ignoreMutation method to your node view, to prevent it from being re-rendered when its internal DOM changes.