dirty-state comparison is to strict with initial values

[sebastian-ludwig]

What happened?

I wanted to create a new User with Firstname, Lastname and Category in a Form.
The category is initially already set (in real life, the values object is much more complex)

const initialValues = {category: 'student'} ;
const currentValues = {category: 'student', firstname: undefined, lastname: undefined}

The Problem ist, that isEqual is answering now with false (and therefore dirty is to true), but actually is isn't dirty because there have not been made any changes.

The reason is the check of the keys, that varies when comparing initialValues to currentValues

keys = Object.keys(a);
length = keys.length;
if (length !== Object.keys(b).length) return false

This might be related to this issue: #4320

Version

Vue.js 3.x and vee-validate 4.x

What browsers are you seeing the problem on?

• Firefox
• Chrome
• Safari
• Microsoft Edge

Relevant log output

No response

Demo link

https://stackblitz.com/edit/u8xuns?file=src%2FApp.vue

Code of Conduct

• I agree to follow this project's Code of Conduct

[logaretm]

Fixing this might incur a performance hit since that check skips key by key checks. But I think that is acceptable, maybe the check could be modified a little with length checking for non-undefined keys.

I will see what I can do.

[logaretm]

Don't think it has that much performance hit if we remove the key existence check and hasOwnProperty. Thanks for reporting this!