Spoilers don’t toggle when inside <details>

I’m not 100% sure, but I think the following steps will reproduce the issue:

  1. Start writing a new post
  2. Add some text with [spoiler] tags around it.
  3. Unblur the text in the post preview. Note that you can reblur and unblur it as much as you want.
  4. Add some more text underneath the spoilered text.
  5. If you left the text in a blurred state, but you unblur it once. But after that (or right away if it was already unblurred) you cannot reblur the text again.

This can also happen in actual posts, not just in post previews. I’m not sure the exact steps to reproduce there (since you can’t type more between unblurring and reblurring), but as least in the one situation I saw the issue for, the blurred text was within details tags. I have no idea if that’s relevant though.


The following is for testing, but may or may not be helpful.

Some spoiler text

Some text after spoiler text.

Summary

Some more spoiler text

Some more text after spoiler text.

Some more text after spoiler text and details tag.

1 Like

I’ve noticed that spoilers can’t be toggled off when they’re inside a <details> tag.

This spoiler can be toggled on and off (works as expected).

However, this doesn’t:

Click to open 'details'

This spoiler can only be toggled on once (it can’t be toggled off).

I think the issue is that, in the second case, the isInteractive function returns true because details is included in INTERACTIVE_SELECTOR.

Removing it should be enough, but I’m not really sure what the side effects will be (maybe @CvX knows).

EDIT: I see this change was motivated by wanting to make GIFs stop on click. In our community, we make heavy use of spoilers and details, so it would be useful to make the blurring behavior more consistent.

2 Likes