Word disappears when searched and in <details><summary<kbd><b>

Contribute Bug

AI-generated summary

A bug was discovered where text disappears when searched if it’s wrapped in <details><summary><kbd><b>. FHTzoob demonstrated this issue and riking provided the CSS rule causing the problem: kbd * * { display: none; }. This rule is triggered when the search tries to highlight the found word, causing the text to disappear. cpradio explained this in more detail. Further testing by FHTzoob revealed that the issue isn’t limited to <details><summary>, but occurs with any <kbd><b> combination. A fix has been pushed by zogstrip and is available on GitHub: https://github.com/discourse/discourse/commit/2a7af5e718583efef800fcfe19640e85b3815407.

1

Usually upon searching a word in the search tab, if the word is in the page you’re on it will be highlighted yellow, like this:

Pasted image817×155 8.16 KB

However today I was doing a lot of formatting and noticed that if the text is written inside

<details><summary><kbd><b>

Then it disappears when searched.

For example:

Pasted image1126×513 25.3 KB

Then when you search “staff”:

Pasted image1119×473 39.3 KB

5 „Gefällt mir“
2

Try it yourself!

**I think I found a bug**

Now search “bug”! It will disappear.

9 „Gefällt mir“
3

That is really cool!

4 
kbd * * {
  display: none;
}

You’ve got kbd → strong → span class="search-result"

2 „Gefällt mir“
5

please translate into English :stuck_out_tongue:

6

CSS Rule what is happening, in short search is trying to put a highlight on your found word and the extra tag it places on your word causes kbd * * to run its display none rule.

Testing this again without the detail summary

1 „Gefällt mir“
7

Oo, it doesn’t have to be in details summary, just kbd and b.

8

kbd with your specific text in 1 nested tag. b, i, u, s, whatever.

9

Thanks @FHTzoob for reporting that issue. I just pushed a fix for the CSS :bird:

https://github.com/discourse/discourse/commit/2a7af5e718583efef800fcfe19640e85b3815407

1 „Gefällt mir“