Browser undo/redo behavior seems to be broken

[scottadamsmith]

I have been digging into this quite a bit trying to find the root cause, but have had no luck so far. For a while, I still thought it might have been something about my implementation specifically, but then I noticed I could recreate the issue on one of the example jsfiddles: https://jsfiddle.net/fergal_doyle/bqys2p5y/

The behavior I am describing is in Chrome. There also seems to be issues in Firefox, but they are a bit different because Firefox doesn't support undo/redo the same Chrome does.

To recreate:

• Type into the first
• Tab to the next field
• Type text in the next field
• Then try and ctrl+z repeatedly to undo all entries.
• If you do this repeatedly and try and redo, you can see that the undo/redo history seems to get completely messed up and it will either redo nothing or redo the wrong text

I'm very open to assisting with a fix for this, but I am struggling to identify the cause. The only thing I can think of is that perhaps the frequent watch triggers start to run out of order, but I am throwing darts at this point.

[scottadamsmith]

I looked into it further and I believe I have narrowed it down to the focus event listener being added here:

https://github.com/fergaldoyle/vue-form/blob/48a08bb0067c8ade4aa1816b8589084c4c27981f/src/directives/vue-form-validator.js#L89-L91

I have seen consistently that I remove that event listener, undo/redo behavior is solid, but when I replace it, the issues crop again. I am not yet clear why, but figured I'd share in case this sheds any light.

Edit: Changing the native event listener to 'focusin' as opposed to 'focus' seems to resolve the issue and still seems to work. However, I would hesitate to suggest this without a better understanding of the cause.