I've noticed that the flagging dialogue behaves strangely when flagging a post as "it doesn't belong here".

The first time I select this all is well and I see the full list of reasons and the descriptions.

If I click "back" then "cancel" (because I need to re-read the post) and then click "flag" and "it doesn't belong here" I get this:

alt text

It's not always consistent, sometimes it works just fine but can be reproduced clicking "flag" -> "it doesn't belong here" a second time.

This happens on Stack Overflow and Server Fault.

I'm using Chrome 8 on Windows 64 bit Ultimate.

  • Repro in Win7 x64 + FF 3.6.13
    – Jon Seigel
    Jan 22 '11 at 21:11
  • Repro in Ubuntu 10.10, Chrome 8.0.552.237 on askubuntu.com.
    – Alvin Row
    Jan 22 '11 at 21:21
  • Repro in Mac OS X 10.6, Safari 5.0.3, on SE build 2011.1.22.5
    – waiwai933
    Jan 22 '11 at 21:27

If I've followed the code right, there's actually two bugs here, depending on how you close the dialog:

  • If you click the × in the corner of the reason panel, it gets removed from the DOM and can't fade back in the second time around.
  • If you...

    1. Click the back link on the reason panel
    2. Close the flag panel
    3. Reopen the flag panel
    4. Select the second option
    5. Click back again

    ...then first panel gets inadvertently left in the DOM and messes up the future clicks on the second option.

The first scenario is caused by the close button being assigned the following click handler:

function () {
    if (flagPopup) {

This removes the reasons panel from the DOM, but not the reference to it stored in vote.flag_cachedClosePopup. On the second go around, the code tries to call fadeIn() on that reference, but it doesn't do anything because that dialog isn't in the DOM anymore.

The second scenario is caused by the back link being assigned a different click handler:

function () {

In this case, the reasons panel isn't removed from the DOM, just hidden. Unfortunately, it then brings the main flag panel back up using fadeIn() via the variable flagPopup. Since any time you close that main flag panel it gets removed from the DOM, this invalidates the flagPopup variable.

So, if you open the flag menu again, it creates a new flag dialog element in the DOM, and then loads the old reasons list after you click option two. If you then click back on the reasons panel, everything disappears. This is because flagPopup.fadeIn() isn't trying to fade in the second flag dialog you brought up, it's trying to fade in the first one. This doesn't work, and leaves the second flag dialog lingering in the page. Opening the flag dialog for a third time results in two flag dialogs residing in the DOM with the same ID, which seems to cause issues.

  • very nice analysis :)
    – Kev
    Jan 22 '11 at 23:31
  • yessir, that's it. Fix will be pushed in the next deploy. Jan 23 '11 at 8:56
  • 1
    you're making this too easy Tim! Let us do some of the work, man! :) Jan 23 '11 at 9:01
  • @JeffAtwood Hahah, fair enough - I certainly don't mean to step on any toes, I know SE is in extremely capable hands. Just figured the team has enough on its plate continuing to make things awesome, and I happened to both be curious and have a bit of free time to go bug-hunting. :)
    – Tim Stone
    Jan 23 '11 at 11:52

You must log in to answer this question.

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