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.