Input field loses focus after typing single character

[carbolymer]

Please fill out these Check-boxes

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

Plugin Version

1.4.1

This Issue Occurs on

• Windows
• 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