2 min read
the corruption came from the search
react debugging open-source

A user reported that after editing a function block in openplc editor, its name in the project tree turned into raw markup:

<span class="bg-brand-light dark:bg-brand-medium-dark border-0 rounded-sm">Taktgeber</span>

Nobody could reproduce it. Everyone, reasonably, edited a function block and watched nothing happen. The issue sat for months.

The explorer passed extractSearchQuery(pou.name, searchQuery) as the tree leaf’s label. That function returns a sanitized html string with a highlight <span> wrapped around matches, and the leaf renders its label as plain text. As long as no search was active, the string was the plain name and everything looked fine.

But the search query persists in the store after the search modal closes. It is only cleared when the modal reopens or the project closes. So the moment you searched for something, every tree label matching it became literal markup until restart. The reporter had searched for his function block at some point before editing it. The edit was a coincidence that made it into the bug title.

Reproduction, once you know: create a function block named Taktgeber, search for Taktgeber, close the search. The tree now displays the markup, byte-identical to the issue’s screenshot.

the string was also the identity

The display problem was cosmetic. The same string also served as the element’s identity: the leaf seeds its rename input from label and passes label to rename, duplicate, delete, and selection. While a highlight matched, those actions targeted a pou name that does not exist.

the fix

Separate the two jobs the string was doing. label now always carries the plain element name, and a new optional highlightQuery prop renders the highlight safely through the HighlightedText component the search results panel already used. Ten call sites, four new tests, and the html-string helper stays where it is rendered correctly.

When a bug is unreproducible, the reported steps usually describe the wrong trigger, in good faith. The state that mattered was set earlier, by an action the reporter did not mention because it appeared to work.

The PR is Autonomy-Logic/openplc-editor#955, merged.