`unicorn:model` clearing field when request sent

Overview

I’m working on integrating Unicorn into a new project and want to build a form with it to remove the need for lots of JS. I’m in the very early stages of setup and I’m running into an error with unicorn:model. When typing in an input field unicorn sends a request as is intended. However, once the request is sent ( or received, I’m not too sure) the input which I have added unicorn:model="name" to the field gets emptied.

See the gif below for a demo of what’s happening. I used the example Hello World component from the docs to create the example.

The request seems okay:

Payload

{
    "id":"RGxVEpbj",
    "data":{"name":"World"},
    "checksum":"GnzWzCxX",
    "actionQueue":[
        {
            "type":"syncInput",
            "payload":{"name":"name","value":"s"},
            "partials":[]
        }
    ],
    "epoch":1661435333662,
    "hash":"nRebsfnn"
}

Response

{
    "id":"RGxVEpbj",
    "data":{
        "name":"Worlds"
    },
    "errors":{},
    "calls":[],
    "checksum":"A4EcPwSS",
    "dom":"<div unicorn:checksum=\"A4EcPwSS\" unicorn:id=\"RGxVEpbj\" unicorn:key=\"\" unicorn:name=\"hello-world\">\n<input id=\"text\" type=\"text\" unicorn:model=\"name\"/><br/>\n    Hello S\n  </div>",
    "hash":"QXEkesKJ"
}

If you need any more information let me know! I’m sure this is user error rather than something wrong with the framework but I thought it worth reporting.

---

Edit: I just created a brand new project to test this out completely isolated and got the same result

Edit 2: It also happens when I have a forked version of this repo set up locally and use the built in examples in the local dev environment

Edit 3: This seems to be a Chrome specific bug as the code works fine in safari!

[adamghill]

Testing on http://localhost:8080/text-inputs with the Nordpass extension is interesting to see what breaks and what doesn’t. 😂 I’m wondering if the issues might be related to morphdom which is the library I use to actual update the DOM under the hood. While I’m testing, it looks like using a key makes things work as expected.

[gschurck]

I have the same issue with Bitwarden.

While I’m testing, it looks like using a key makes things work as expected.

How did you manage to make it work @adamghill ? I don’t understand how to replace the model:search/updated_search() behavior with a key (same pattern as this example). I don’t really understand how unicorn:key work and what it does.