Component is hidden and never shown again under <Show />

[andreevsm]

Describe the bug

Hello! I have three components: ComponentA and ComponentB get ComponentC via props. Depending on isMobile signal,ComponentC is rendered either under ComponentA or ComponentB. But sometimes ComponentC is not displayed in these components. Moreover, sometimes nothing is displayed. So I provided the link who you can reproduce the problem

Your Example Website or App

https://stackblitz.com/edit/solid-vite-h2s1pgwn

Steps to Reproduce the Bug or Issue

1. Follow the link
2. Resize the window to 400px to get isMobile = true
3. Check the displaying of ComponentC
4. Resize the window to more then 400px to get isMobile = false
5. Check the displaying of ComponentC

Expected behavior

On more then 400px I expected to see ComponentC under ComponentB - on desktop block
On less then 400px I expected to seeComponentC under ComponentA - on mobile block
But right now ComponentC is displayed unpredictable, sometimes under ComponentA, sometimes under ComponentB and sometimes nothing is displayed.

Screenshots or Videos

Video

As you can see from the video, if you wrap ComponentC in a <div>, the content is displayed as expected, but I don't understand why it works this way? The fix with the <div> doesn't look obvious and I would like to better understand the process of rendering content inside the <Show>.

An additional question is that onMount is called inside ComponentC even when the component has not been rendered. I believe this is happening because of callingchildren(). So how do I make sure that onMount is not called until the component is displayed in the DOM?

Platform

• OS: macOS
• Browser: Chrome
• Version: 138.0.7204.184

Additional context

[titoBouzout]

I cannot seem to reproduce with the provided example (its reproducible when the divs are removed), but I think it's referring to this issue #2357

Basically, when you move a node, if its removed first, then it will be appended/moved to where you were looking for.
But, if the node is moved first, and then removed, then its completely removed.

There's a PR related to this here ryansolid/dom-expressions#382

---

As you can see from the video, if you wrap ComponentC in a

, the content is displayed as expected, but I don't understand why it works this way? The fix with the

doesn't look obvious and I would like to better understand the process of rendering content inside the .

That happens because there are 2 shows creating 2 new divs, so the element count is

• component C
• div container of show 1
• div container of show 2

When the div is removed, you only get component C, and what I described before happens.

---

onMount will run once, after the element is created. The timing is supposed to match the element being in the DOM, but if its hoisted and not added to the dom, then node.isConnected will give false. This is kind of expected.

[mizulu]

@titoBouzout , yes the repro shows the working case. removing the div is the failing case.

it is same issue as you linked #2357

when you go from desktop to mobile this is what solid is doing
and why the element is gone

[ryansolid]

Let's track this all under the one issue. This behavior is largely expected but let's keep the conversation going in one place.