Disable Browsersync ghostMode to stop interactions being mirrored across tabs and devices

[edwardhorsford]

I've discovered that Browser Sync ghost mode is the cause of a tricky and unpredictable set of issues I've had. It looks like it's not intended to be enabled in the kit, but due to a typo it was.

---

The issue

If you have multiple tabs open to the same page in the kit, the default browsersync settings will mirror clicks and changes across all of them. This means when you submit a form, that same request will happen twice.

This can cause bugs / unexpected behaviour - if your app has routes that make changes on the basis of form submissions, it can get in to an inconsistent state if routes are running multiple times.

This can easily be verified by putting a console log in the default over-18 route - if you have two tabs open it'll log twice.

Background

I reported on slack some months back an issue with routes running multiple times - I could tell that because a console log in the route would end up repeated.

Yesterday I had several bugs during a product demo - missing dates, invalid routes, application state in a position it couldn't be.

Later on I couldn't reproduce these issues.

I now realise it's because I had 4 tabs open to my prototype - so every form submission I was making got mirrored 4 times. Some of my routes destructively alter data - so doing this 4 times got the app in to a very weird state.

Documentation

See https://browsersync.io/docs/options#option-ghostMode

[joelanman]

Thanks @edwardhorsford ! Would you be able to make an update to Changelog for this fix?

[edwardhorsford]

@joelanman @36degrees updated the changelog.