Marketo Forms bug in Chrome 51/Mac, and a fix

Chrome 51 is out, and Marketo Community user PC noticed it doesn't play well with Forms 2.0 dropdowns (HTML <SELECT> tags) on Mac OS. As usual, I set out to find the cause + a fix.

Luckily, the problem isn't fatal to form operation, so you don't need to freak out if you can't apply the fix immediately. Dropdowns are still functional, but they have a very noticeable flicker whenever they are clicked.

Compare this recording of the broken behavior:

With the behavior of the same page after the fix is applied:

The underlying technical cause is a change Chrome 51 made to the way focusin and click events are bubbled up the DOM tree, in combination with Chrome's use of Mac OS native controls for standard input elements (which is why Windows is not affected). I won't get into much more here — it wouldn't be worth the read — but Marketo's Forms 2.0 library listens for and re-dispatches events on some parent DOM elements and the new Chrome architecture creates duplicate click events. The flicker you see is your mouse click followed by an JS-driven unfocus and reclick.

The fix for Forms 2.0 users — as I didn't want to recompile forms2.js for this — is to stop clicks on <SELECT> elements from bubbling. It's quite simple:

MktoForms2.whenReady(function(form) {  
  var selEls = form.getFormElem()[0].querySelectorAll('SELECT');

  if (window.chrome && window.chrome.runtime && navigator.credentials) {
    [].forEach.call(selEls, function(el) {
      el.addEventListener('click', function(e) {
        e.stopPropagation();
      });
    });
  }
});

The only tricky part was figuring out a feature detect for Chrome 51+ to apply this as narrowly as possible: since Chrome added DOM Credentials support in the same version, that does the trick. (The fix should be totally harmless in unaffected browsers, but thought I'd play it safe.) I didn't bother with an OS check because that isn't necessary, and also because technically the same new event behavior exists on Windows (it just isn't "felt" there, at least not now).

See the fix in action here.


EDIT 2016-06-17: Google fixed this in Chrome 52 (current Beta channel), so the impact will dwindle after ~July 16, 2016.