JSXElement in createSignal or createMemo, when the page changes, it disappears on the page.

[wizardAEI]

Describe the bug

I am writing a select component, but when I set the label to be a JSXElement, the JSXElement in the label disappears when the select component is clicked.

Or am I using it incorrectly?

Developers are hoped to see this, and solid is very nice! thank you very much.

Your Example Website or App

https://stackblitz.com/edit/solidjs-templates-qhnsfh?file=src%2FApp.tsx

Steps to Reproduce the Bug or Issue

1. click the select
2. the label disapear

Expected behavior

The label not disappear.

Screenshots or Videos

No response

Platform

• OS: [e.g. macOS, Windows, Linux]
• Browser: [e.g. Chrome, Safari, Firefox]
• Version: [e.g. 91.1]

Additional context

No response

[danieltroger]

So what happens when you do <b>test</b> is that it will actually evaluate to a HTMLElement (the same as calling document.createElement("b")).

That means that every time that value is used it's the same element. Some constrains apply to elements regarding to the DOM, like this one that I think is what you're running into:

1. One element can only be in the DOM once, if you try to insert it again it will automatically get removed from the old place

What solid usually does to work around this, is not evaluating <b />at the time of creation of the object that should contain it, but first when it's needed, using a getter. That way you insert the value on your object multiple times into the DOM because every time you do it a new element will be created.

Fixed example: https://stackblitz.com/edit/solidjs-templates-mvvvev?file=src%2FApp.tsx

[wizardAEI]

Thank you for your answer!