Skip to main content
added 142 characters in body
Source Link
CertainPerformance
  • 369.8k
  • 4
  • 31
  • 43

I don't knowthink the purpose of the original rule that's causingis an odd way to have clicks outside the problem.snippet-holder (that is, there may be a good reason for itclicks on the dark rectangle on the edges) trigger the modal-closing mechanism. If you override the rule like this, but overriding it seemsyou'll have to work forclick on the momentSave or Cancel buttons to exit the snippet editor.

I don't know the purpose of the original rule that's causing the problem, there may be a good reason for it, but overriding it seems to work for the moment.

I think the purpose of the original rule is an odd way to have clicks outside the .snippet-holder (that is, clicks on the dark rectangle on the edges) trigger the modal-closing mechanism. If you override the rule like this, you'll have to click on the Save or Cancel buttons to exit the snippet editor.

Source Link
CertainPerformance
  • 369.8k
  • 4
  • 31
  • 43

I figured out the source of the problem. In short: it occurs when you click rapidly after opening a snippet for the first time, before the snippet framework HTML has had a time to load. Clicking triggers a listener which expects the snippet HTML (and associated data) to be loaded. An error is thrown, and further JS execution stops, preventing you from saving / canceling the snippet to get back to the question/answer box. It's pretty reproducible if you try to make it happen deliberately and live more than a few milliseconds away from the servers.

The problem is ultimately caused by the primary.css stylesheet rule of

.modal.auto-center.snippet-modal {
  pointer-events: none;
}

User-side, this can be fixed by inserting the following CSS rule onto the page. I haven't seen any negative consequences from using it:

.snippet-modal {
  pointer-events: auto !important;
}

You could do this automatically with something like Stylish or a userscript:

// ==UserScript==
// @name             Snippet Modal Fixer
// @author           CertainPerformance
// @description      Prevents snippet double-clicking from breaking the snippet interface
// @version          1.0
// @match            https://stackoverflow.com/questions/*
// @grant            none
// ==/UserScript==

document.body.appendChild(document.createElement('style')).textContent = `
.snippet-modal {
  pointer-events: auto !important;
}
`;

I don't know the purpose of the original rule that's causing the problem, there may be a good reason for it, but overriding it seems to work for the moment.


Complicated Javascript error details ahead:

The first time you click on the <> button to create a snippet, or when you click on "edit the above snippet", the site makes a network request to /snippets/editor-ui to get the snippet modal's HTML. Two elements immediately appear as children of the <body>: a lightbox <div class="lightbox" ...</div> and, on top of it (with z-index), a <div class="modal snippet-modal ..., which gets populated with the snippet HTML once the network request resolves.

The snippet modal follows the following CSS rule:

.modal.auto-center.snippet-modal { pointer-events: none }

Once the network request finishes, this .snippet-modal gets populated by a child, <div class="snippet-holder">, which has pointer-events: auto;. But, this means that before the request finishes, clicks on .snippet-modal will instead be registered by (have an event.target of) whatever element's behind the .snippet-modal, which is the .lightbox.

There is a mousedown listener on the body:

$('body').mousedown(function (e) {
  var target = $(e.target);
  if (target.closest('.ac_results, .popup, .wmd-prompt-dialog, .message, .modal, .body-click-hide').length) return;
  // close some interfaces under certain conditions:
  if (!target.closest('.share-tip').length) {
    doEscapeClose('.share-tip', clickOutside);
  }
  // other calls to doEscapeClose
  

It's intended to return immediately if the clicked element has a .modal ancestor. But, if the response hasn't come back yet, the .snippet-modal hasn't been populated with .snippet-holder yet, so the click goes through the .snippet-modal and is registered on the lightbox instead. The above code won't return, and doEscapeClose will be called, eventually leading to these lines:

var popupClosing = $.Event('popupClosing', eventData);
items.trigger(popupClosing);

This event is observed in snippet-javascript.en.js:

var save = function (isEscape) {
  var state = snippetPopup.data('_snippet').save(); // <-------- error
  // do some other stuff
}

snippetPopup.on('popupClosing', function (e) {
  // do some stuff
  save(isEscape);
});

The _snippet data is intended to be populated when the initEditor function runs:

var initEditor = function () {
  elem.data('_snippet', snippet);
  // ...
}
// ...
  loadEditorInnerHtml(options.readonly).then(initEditor);

But if the snippet HTML hasn't come back yet, the loadEditorInnerHtml Promise hasn't resolved yet, so snippetPopup.data('_snippet') returns undefined, and undefined.save() throws the error.

Lots of ways to fix it, but that's up to the devs.