16

When clicking the small bookmark button to save a post — either question or answer — a confirmation notice appears. If you have custom save lists, this notice includes a "Manage" button which shows the "Save to" dialog. This dialog buttons are broken. Apparently the popup loads the action buttons HTML but it injects it as-is instead of actually rendering the buttons.

Repro:

  • Click the bookmark icon below a post's votes button to save a post
  • Click the "Manage" button in the confirmation notice
  • The buttons don't work: they are just literal HTML

enter image description here

9
  • 3
    Hmm, works for me without error Commented Jul 12 at 7:49
  • 1
    works also for me, what browser + OS are you using? Any plugins / userscripts that could interfere?
    – Lino
    Commented Jul 12 at 8:04
  • I tested without userscripts as well. I'm on MacOS Ventura + Arc browser
    – blackgreen Mod
    Commented Jul 12 at 8:15
  • But I can reproduce this on Chrome as well
    – blackgreen Mod
    Commented Jul 12 at 8:18
  • 3
    Maybe it's a moderator-only bug? Something about the mod-UI being broken? Do you have an alt-account you can try this with? (Works for me on FF/Mac)
    – yivi
    Commented Jul 12 at 8:33
  • I have an alt account, I’ll try with that later
    – blackgreen Mod
    Commented Jul 12 at 8:48
  • 1
    It is also broken for me on Windows + Chrome, but only on Stack Overflow. So it might be a mod related bug.
    – Dalija Prasnikar Mod
    Commented Jul 12 at 9:39
  • I've also seen this for a few days but hadn't gotten around to reporting it.
    – Ryan M Mod
    Commented Jul 12 at 11:11
  • 7
    Just confirmed the issue. It's only happening for Moderators right now (I'll explain why later). I can reproduce this issue locally and will work on a fix right away.
    – Ham Vocke StaffMod
    Commented Jul 12 at 12:03

1 Answer 1

25

This bug shows up for every Moderator user on all Stack Exchange sites at the moment. Regular users won't run into this issue. I've got a fix up for review and that one should find its way to production soon.


This is a fun one. Since we're on Meta Stack Overflow, I sense y'all might appreciate a glimpse behind the scenes (note, this bug happens on all SE Network sites). Here's what's happening:

We're in the process of upgrading our jQuery dependency. Right now, we're serving jQuery 1.12.4, which is super outdated (I know, I know...). We're upgrading it to jQuery 3.7, the latest stable version (yes, jQuery 4 is around the corner, that's a story for another day). We're rolling out this upgrade in small waves. First, it was only employees getting the new jQuery version. Once we were reasonably confident that it's stable enough, we started rolling it out to all our moderator users, too (this happened on Monday, July 8th). Next up, we'll roll it out to all our users across the network, but we'll do some more testing before doing so.

To load the "Manage your Saves" modal dialog that's showing the gibberish we see in the bug report above, we're using jQuery to do some DOM manipulation. We're old-fashioned like that sometimes.

Our markup for the modal dialog contains a textarea element that allows you to add a private note with your save. This textarea is supposed to be empty in the modal we see in the screenshot in the question, it should only show a placeholder text. However, with this bug in place, it's showing actual markup -- weird stuff. The issue is that the server-side HTML template we use to render the modal contained invalid HTML. The textarea tag we served was written as a self-closing tag, somewhat like this:

<textarea class="s-input" placeholder="Add a private note to your save (optional)" />

Unfortunately, that self-closing syntax is only allowed for void elements, and textarea isn't one of 'em.

jQuery 1.12 didn't mind. It worked with quirks like this just fine, and when you passed the above self-closing textarea tag to jQuery it would simply expand it to the right markup (<textarea></textarea> ). jQuery 3, however, seems to be more strict (or standards compliant?) and treats this situation differently, leading to weird markup that results in the bug we're seeing above. The fix is simple: close your <textareas> properly!

Sorry for the inconvenience, folks!

0

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .