"compare" dirty check compares value to the very first value even after form is reset with new values

[sheremet-va]

Reproduction

https://formkit.com/playground?fkv=latest&fileTab=Playground.vue&files=jc%5B%28%27name%21%27Pqd.vue%27%7Eeditor%21%27%3Cscrip6setupJimpor6%28+jf+%29%C2%A0from+%22vue%221X+ESM+importGarHsupporteYfrom+URLG%7Bhttps%3AXcdn...ZX+aGwell+aGsecondary+pqYfi_G%7B.%2FOtherFi_.vue%7D.Q53jf%7Bnull%7DQ9VA3jf%7B%22a%22Z_6n1QgetNT3%7BnTB3nT05.vA3nT.50conso_.log%7B%225D5.vAZ%291Q93%7BB.9%7B9VA.vAZ%2918scriptJ1%3CzWFormKit4type7se_ct24label7FormKi6Input24help7edi6mHto+ge6started24vA7b24%3Aoptions7%5B%22aD%22bD%22c%22%5D24dirty-behavior7compaj24%40nT7getNT20%2FWinpu6v-mTl79VA2+%2FWbutton+%40click792%3EReset8button%3E00%3CprHv-if752%3E%28%28+5.statH%29%298pjJ8zJ1%3Csty_J%2F*1vanilla+CSS+can+go+hej.1Keep+sty_GscopeYto+avoiYmultiplHfi_s1overwriting+each+other+in+thHjnder+output.1*%2F18sty_J%27%7Eadded%21true%29%5D01++1%5Cn2%5C%273+%3D+40++5context6t+7%3D28%3C%2F9jsetAalueB%7D+%3D%3E+%280nD%22%2C+Gs+He+J%3E1Q1cons6TodeW%3E0%3CX%2F%2FYd+Z%7D1_lejreqlaygrounztemplate%01zqj_ZYXWTQJHGDBA9876543210_&imports=jc%28%27name%21%27ImportMap%27%7Eeditor%21%27%28*+1vue%5C%211https%3A%2F%2Fcdn.jsdelivr.net%2Fnpm%2Fvue%403%2Fdist%2Fvue.esm-browser.min.js0*%29*%27%29*%5Cn0%5C%271+0%0110*_&css-framework=genesis

Describe the bug

I am not sure if it was intended like this or not, but it was unexpected in the context where this bug happened.

If dirtyBehavior is set to compare, then the value is always compared to the first value that was passed down (and stored as props._init). This looks wrong when we call formNode.reset(value) with different values (which already updates props.initial).

To reproduce the behaviour in linked reproduction:

• Notice the value is "b"
• Click "reset" (it resets the value to "a")
• Select value "b"
• Notice it is not "dirty"
• Select value "a"
• Notice it is dirty

Environment

• OS: any
• Browser any
• Version 0.17.3

[dominikklein]

Maybe also related to this: #621

[justin-schroeder]

This will be fixed in the 0.18.0 release 👍

[dominikklein]

@justin-schroeder I created an additional playground, where you can see that the bug is not fixed when a form is used around the field: https://formkit.link/74f80d7df2b2c8c883a2dfbe2594b21e

So you can change the value and click submit, inside submit the form is resetet with the new data and both nodes (form + input field) have the dirty flag false.
When I now change the value to the initial value from the very first rendering (b) the form will be dirty, but the field note itself will not be dirty.

[Robinhoeh]

@justin-schroeder I created an additional playground, where you can see that the bug is not fixed when a form is used around the field: formkit.link/74f80d7df2b2c8c883a2dfbe2594b21e

So you can change the value and click submit, inside submit the form is resetet with the new data and both nodes (form + input field) have the dirty flag false. When I now change the value to the initial value from the very first rendering (b) the form will be dirty, but the field note itself will not be dirty.

This is great, thanks so much for sharing!

I am stuck on using this logic for custom formkit component

We have a top level FormKit element with 4-5 custom formkit components

<Formkit type="form" @submit="submitToApi"
		<FormKitTags />
		<FormkitBlock />
		<FormkitPlacement />
		<FormkitRank />
		....
		.....
</FormKit>

How would I go about tracking the "dirty" state value on the custom formkit components in the top level(Parent) component? Is that possible?

I was able to see the component state dirty:false in the child and the parent dirty:true but need to be able to check the child state in the parent component 👀 Any insight would be great!

Thank you!

[Robinhoeh]

@dominikklein thanks for your playground! wondering if you know the answer to this ⬆️ ??

[justin-schroeder]

Thanks for the good reproduction @dominikklein — child initial states are also being reset now in the latest @next.