Input field loses focus after typing single character

[carbolymer]

Please fill out these Check-boxes

• [x] I checked for existing similar issues
• [x] I checked that the plugin is up to date
• [x] The issue persists with all other plugins and themes disabled

Plugin Version

1.4.1

This Issue Occurs on

• [ ] Windows
• [x] Linux
• [ ] macOS
• [ ] Android
• [ ] iOS

Debug Info

SYSTEM INFO:
	Obsidian version: v1.8.9
	Installer version: v1.8.9
	Operating system: #1 SMP PREEMPT_RT Sat, 08 Feb 2025 14:15:24 +0000 6.6.52-rt43-arch1-4-rt-lts
	Login status: not logged in
	Language: en
	Insider build toggle: off
	Live preview: on
	Base theme: adapt to system
	Community theme: none
	Snippets enabled: 0
	Restricted mode: off
	Plugins installed: 2
	Plugins enabled: 2
		1: Dataview v0.5.68
		2: Meta Bind v1.4.1

RECOMMENDATIONS:
	Community plugins: for bugs, please first try updating all your plugins to latest. If still not fixed, please try to make the issue happen in the Sandbox Vault or disable community plugins.

Describe the Issue

When I type text in the metabind field, the field loses focus after a single character, which prevents further typing

Steps to Reproduce

1. Instal meta bind, dataviewjs, enable javascript inside the notes

2. Create a note with the following content:

    ---
    exercises:
      - exercise: "[[ex1]]"
        sets:
          - weight: 3234
            reps: 3
            comment: 3ws
      - exercise: "[[ex1]]"
        sets: 
    ---
   
    ```dataviewjs
    const mb = app.plugins.getPlugin('obsidian-meta-bind-plugin').api
    const frontmatter = dv.current().file.frontmatter
    const notePath = dv.current().file.path
    frontmatter.exercises.forEach((x, i) => {
   
       const is = String(i)
       const headlineOptions = {
         renderChildType: 'inline',
         declaration: 'VIEW[{exercises['+ i +'].exercise}][text(renderMarkdown)]'
       }
   
      const tableOptions = {
        bindTarget: mb.createBindTarget('frontmatter', notePath, ['exercises', String(i), 'sets'], true),
        tableHead: ['', 'Weight', 'Reps', 'Comment'],
        columns: [
          'INPUT[toggle:scope^completed]',
          'INPUT[number(class(meta-bind-small-width),placeholder(weight)):scope^weight]',
          'INPUT[number(class(meta-bind-small-width),placeholder(reps)):scope^reps]',
          'INPUT[text(placeholder(comment)):scope^comment]',
        ],
      };
   
        console.log(i)
        console.log(x)
      const headlineContainer = document.createElement('div')
      this.container.appendChild(headlineContainer)
      const headline = mb.createViewFieldMountable(notePath, headlineOptions);
      mb.wrapInMDRC(headline, headlineContainer, this.component)
   
      const tableContainer = document.createElement('div')
      this.container.appendChild(tableContainer)
      const table = mb.createTableMountable(notePath, tableOptions)
      mb.wrapInMDRC(table, tableContainer, this.component)
    })
    ```
   

3. Go into reading mode

4. Try typing few characters into the field. The field loses focus after the first character preventing further typing.

Expected Behavior

When I type few consective characters into the field, the field does not lose focus after the first one and allows to enter more characters.

[carbolymer]

I'm seeing the same if I'm using js-engine block instead of dataview.

[mProjectsCode]

This is probably caused by dataview updating the code block when the frontmatter changes. Do you see the same behavior with the PF2e encounter calculator example in the example vault?

[carbolymer]

Yes, I've reproduced it in the example vault. The same happens without dataview, in js-engine block.

[emaiax]

I also see this behavior in macOS and iOS versions. :(

[mProjectsCode]

Can you share a minimal example of the issue, with as little extra fluff as possible?

[michelebugio]

Happens to me if typing within a Page Preview note, not sure it's the same case as them. When typing outside a page preview, in a fully opened note, it works.

[sweetcornwhiskey]

Here's a minimal example with meta-bind-js-view:

---
test_tag: ""
---
```meta-bind-js-view
{test_tag} as test_tag
---
return engine.markdown.create(`\`INPUT[text:test_tag]\``);
```

This also happens with textArea and editor inputs.

[mProjectsCode]

For @sweetcornwhiskey's example, the behavior is expected. Typing a character into the text field updates test_tag. The meta-bind-js-view code block is set up to rerender when test_tag updates. So the meta-bind-js-view rerenders, and due to the rerender, the input field is deleted and recreated, losing focus. A fix is to move the input out of the code block.

[sweetcornwhiskey]

For @sweetcornwhiskey's example, the behavior is expected. Typing a character into the text field updates test_tag. The meta-bind-js-view code block is set up to rerender when test_tag updates. So the meta-bind-js-view rerenders, and due to the rerender, the input field is deleted and recreated, losing focus. A fix is to move the input out of the code block.

That's unfortunate to hear. Having input text fields that live in JS contexts and are writable would be extremely helpful.

[mProjectsCode]

Having input text fields that live in JS contexts and are writable would be extremely helpful.

They do work, with the limitation that you can't bind to properties that the JS view field (that creates the input) specifies as a dependency.

[sweetcornwhiskey]

They do work, with the limitation that you can't bind to properties that the JS view field (that creates the input) specifies as a dependency.

Yes, but it does mean that you can't do things like have an input text field that modifies frontmatter that may or may not appear in the document depending on whether your note has a particular tag.

[mProjectsCode]

Sorry if I am misunderstanding what you are saying, but you can.

The below example is fine, as long as no input field created by the js view modifies show_input.

---
show_input: false
text: foo
---

Show input: `INPUT[toggle:show_input]`

```meta-bind-js-view
{show_input} as show_input
---
if (context.bound.show_input) {
    return engine.markdown.create('`INPUT[text:text]`');
} else {
    return '';
}
```

The only limitation is that the bind target of the input field may not "overlap" with the bind targets that the js view field depends on.

[sweetcornwhiskey]

Ah ok I understand. That makes more sense to me now

[FelixGute]

I'm experiencing a similar issue in Live Preview mode where an input field (in this case, a textarea) inside a Markdown table loses focus. The same issue happens with an inline select field, but it is less noticeable - you just click twice. With a textarea, every single change causes focus loss.

Happens both when initially clicking on the field, and when changing the field.

It is as though the table cell steals the focus from the input, and that causes a rerender. Have sometimes seen the editor showing the code block before rerendering the field.

I am not using any other plugins that affect tables (no Advanced Tables, for example). Have tried without using array and object as bind targets and it works the same.

The workaround I'm currently using is to switch to Reading mode, which completely negates the bug.

Example to reproduce issue:

| Student | Grade | Comment‎‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ |
| ------- | ----- | ----------------------------------- |
| Sample Name | `INPUT[inlineSelect(option(0, 0 ❌),option(1, 1 🔷),option(2, 2 ⭐)):students[0].rating]` | `INPUT[textArea:students[0].note]` |

Steps:

1. Be in Live Preview Mode in a note containing the code above.
2. Click into either the Textarea or the Select field.
3. Click into Textarea again after losing focus, and type.

What happens:

After step 2 and 3, focus is set to the table cell containing the intended field.

Note: Some erradic behavior can happen where focus is lost completely and no input can be done at all until focus is set manually by the user.