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

Explanation

When spoiler text is put into a details folder, it can be unblurred as per usual by clicking on it, but clicking again does nothing, and it cannot be reblurred. Closing and reopening the details folder is ineffective. My explanation of this on the Hopscotch Forum explains this better.

Demonstration

Feel free to use this details folder as an example. My exact process is explained on the Hopscotch Forum topic.

Details folder

Sample text

How to reproduce

  1. Create a post with a details folder
  2. Put spoiler text into it
  3. Open the folder and unblur the text
  4. The text cannot reblur without reloading the page
1 Like

Thanks for the repro steps. This is a minor inconvenience(especially since it’s inside a togglable block so we can hide the content by toggling details), but a fix could be welcome.
I will put a pr-welcome on the topic if someone wants to give it a try on fixing it.

The plugin repo is here: GitHub - discourse/discourse-spoiler-alert: A plugin for discourse to hide spoilers behind the spoiler-alert jQuery plugin

But I have the feeling it’s more of a Hide Details feature issue.

Content in Hide Details doesn’t always display (and interact as well?) as expected. For example, hotlinked pictures, links, videos etc won’t be displayed. It will only show the links:

Summary

https://cdn.discordapp.com/attachments/914531040297635861/1107226488534740992/1920x1080.png

Harry Potter by Balenciaga 2 - YouTube

Apex Legends pro sweet hits Predator rank with no kills to “prove how bad” Ranked is - Dexerto

2 Likes

Thank you!