Deselection of text input inside <Show>

[Kazumasan]

Hey, so pretty simple issue if you have a form like this

<Show when={true}>
    <form use:formGroup={fg}>
        <input type="text" formControlName="email" /> 
     </form>
</Show>

Essentially, the input field gets deselected every time you input a character.
Here is a repo with an example.

A quick discussion on the Solid-js Discord found that the issue is with solid-js@>1.4.7 in the playground, the Repo uses [email protected]
Breaks
Works

Maybe you can shed some light on it ?

[kajetansw]

Thanks for reporting this and for repros 🚀

I cannot pinpoint from the top of my head what exactly is the issue here...

Also found out, that if you wrap individual form controls in <Show>, the binding does not work 😅

I'll take a look at both cases.

[Kazumasan]

Hey, I tinkered a bit with it and found that if you wrap the form into a component it works inside Show I added a branch with the example to my repo.

[mdynnl]

This issue comes from unintentional subscription to a signal like the one at https://github.com/kajetansw/solar-forms/blob/master/src/core/form-group-directive/form-group-directive.tsx#L31
There are other places with the same code. It might solve this issue if these are untrack-ed. It is also a good practice to wrap with untrack explicitly especially when writing actions. You never know when users are gonna call your functions.

I also wonder if this is on Show. I'll see what I can do in solid discord.

[kajetansw]

I appreciate the engagement and suggesting solutions! ❤️

I did what @mdynnl suggested and seems to be working! I untracked dangling subscriptions in form-group-directive.tsx and wrapping form in Show seems to be working (see preview below). Thanks!

Also, I managed to fix a case of wrapping individual form controls in <Show> that I described previously. The solution was suggested by The Man himself in one of Solid's issues.

I'll publish the new version when I'll wrap it up.

Screen.Recording.2022-07-20.at.18.14.48.mov