Sibling Shows unexpectedly trigger blur on sibling

[alex-stanescu]

Describe the bug

When a (focusable) element is flanked by a Show component on either side, a signal triggering both Show components to true will cause the focusable element to lose focus.

Proximally this is caused by the reconcileArray logic using replaceChild rather than an insertion method (replacing the focusable element with one of the newly visible Shows, before putting the focusable element back in the DOM). This results in a blur event being fired at the focusable element (and no subsequent .focus event for it to regain focus).

Your Example Website or App

https://playground.solidjs.com/anonymous/6a550f0d-b8bd-41cd-840f-491c94b2ec36

Steps to Reproduce the Bug or Issue

1. Go to the playground link
2. Open the in-playground console
3. Click the Do Show button
4. observe the focusable div gets focused and then immediately blurred

Expected behavior

I expect that causing (seemingly) unrelated divs to Show will not result in a blur event being fired on the element that has focus. If that is not possible, I expect the element to at least regain focus after the reconciliation is complete

Screenshots or Videos

No response

Platform

Reproduces on multiple browsers, but mine ismacOS, Chrome Version 113.0.5672.92 (Official Build) (x86_64), using latest Solid

Additional context

No response

[ryansolid]

This is interesting. Yeah the udomdiff algorithm we moved to in march 2020, will produce the blur event. https://github.com/WebReflection/udomdiff/issues/7

I will need to see which ones don't. Keeping track of focus and focus restoration seems way more brittle than looking at the reconciliation algorithm. I don't see us ever doing that because the library is not really DOM aware and focus state isn't really represented declaratively. But I will need to audit solutions. It is quite likely that they all have edge cases in this regard.

Because there are performance implications this might take a while.