unicorn:model clearing field when request sent

[allmanaj]

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]

That's really strange. I do tend to use FireFox for all my development, but I just double-checked in Chrome (version 104.0.5112.101 on a M1 Mac) and it seems to be working ok for me.

Kapture.2022-08-27.at.08.17.44.mp4

What version of Chrome are you on, what OS, and do you see any web dev console errors or anything? Sorry you are running into this problem!

[allmanaj]

Hey, thanks for getting back!
So I just checked and I'm on chrome version104.0.5112.101 on an M1 Mac as well :/
I'm getting the following in the console, one's for favicon and it looks like the other is because of my adblock extension.
I've tried one update to the textbox and got that in the console too as you can see below

DevTools failed to load source map: Could not load content for chrome-extension://gighmmpiobklfepjocnamgkkbiglidom/browser-polyfill.js.map: System error: net::ERR_FILE_NOT_FOUND
favicon.ico:1          GET http://localhost:8000/favicon.ico 404 (Not Found)
(index):85 got updated Component {id: 'JpDrykSy', name: 'unicorn.components.hello_world.HelloWorldView', key: '', messageUrl: '/unicorn/message', csrfTokenHeaderName: 'X-CSRFTOKEN', …}actionEvents: {click: Array(1)}actionQueue: []attachedEventTypes: ['click']attachedModelEvents: [Element]checksum: "fXjS45aS"csrfTokenHeaderName: "X-CSRFTOKEN"currentActionQueue: nulldata: {name: 'Worldd'}document: documenterrors: {}hash: "jnWdnbPD"id: "JpDrykSy"key: ""keyEls: (2) [Element, Element]lastTriggeringElements: []loadingEls: []messageUrl: "/unicorn/message"modelEls: [Element]morphdom: ƒ morphdom(fromNode, toNode, options)name: "unicorn.components.hello_world.HelloWorldView"poll: {}return: {}root: divsyncUrl: "/unicorn/message/unicorn.components.hello_world.HelloWorldView"visibilityEls: []walker: ƒ walk(el, callback, filter = FilterAny)window: Window {window: Window, self: Window, document: document, name: '', location: Location, …}[[Prototype]]: Object

Hope this helps! I

[adamghill]

One other thought: can you open a new new incognito window in Chrome and/or disable all plugins? I wonder if something weird is happening there?

[allmanaj]

Hey @adamghill, That actually seems to have solved the issue. It works just fine in an incognito window but after clearing the cache in my regular browser the issue persists. It also works fine in a different chrome profile.

My best guess at the moment is that it's clashing with a chrome extension I have installed so I'll try and deduce what it could be and report back!

Thanks so much for your help

---

Edit: It seems like it's my Nordpass chrome extension which is wiping the field! Why, I've got no clue but I disabled them all and re-enabled one-by-one and narrowed it down. This is the culprit https://chrome.google.com/webstore/detail/nordpass%C2%AE-password-manage/fooolghllnmhmmndgjiamiiodkpenpbb?hl=en

[adamghill]

OK! I know Bitwarden has caused issues in the past, too. I can take a look at Nordpass and see if I can figure out a way to prevent it from clobbering Unicorn.

[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.

[allmanaj]

Fantastic 😂 Glad to hear about the work around, means I can get on with my site! Thanks so much for your help with this. I'll just use a key for now, do you reckon this will be something that has to be fixed in morphdom or will a PR to this repo help get round it?

[adamghill]

I don't think there has been an updated release of morphdom for the past 2 years from what I can tell on https://www.npmjs.com/package/morphdom. I could try to dig into the morphdom source, but I've also been looking at some other implementations similar to morphdom:

• https://alpinejs.dev/plugins/morph
• https://github.com/choojs/nanomorph
• https://github.com/bigskysoftware/idiomorph

[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.

[JohananOppongAmoateng]

This behavior isn’t a bug in Unicorn itself—it usually comes down to browser extensions (like NordPass or Bitwarden) interfering with input fields and how Unicorn uses morphdom to update the DOM.

When you type into a field with unicorn:model, Unicorn sends a request and updates the DOM with the new component state. If morphdom replaces the element, certain browser extensions may “reset” the field, making it appear as though Unicorn cleared it.

How to fix it

Use unicorn:key on your input

<input type="text" unicorn:model="name" unicorn:key="name-field" />

This tells morphdom to preserve the input element between updates, preventing extensions from wiping its value.