Input focus lost when sibling is added to parent node.

[kristoferjoseph]

This is an edge case i discovered while using nanomorph "in anger".

What is the best way to test issues like these?

// initial state
<form>
  <label for=stuff>
    <input autofocus="autofocus" name="stuff">
  </label>
</form>

// Updated state based on input interaction
<form>
  <h1>YOU DID A THING!</h1>
  <label for=stuff>
    <input  autofocus="autofocus" name="stuff">
  </label>
</form>

[yoshuawuyts]

Ah yeah, this might be because of https://github.com/choojs/nanomorph/issues/85 too — the minimal amount of change is to insert the h1 before the label, but instead it probably creates two new elements. For some reason inserts after the element behave differrently. The issue linked should fix that, as the minimum amount of changes would be taken (we could use help with that by the way!)

Hope this makes sense? Also re:testing — just writing a unit test where you check if the elements are actually the same (e.g. moved vs recreated) would probably be the way to do it. Think we have a few of those already :D

On Thu, Oct 19, 2017 at 6:30 PM kj notifications@github.com wrote:

This is an edge case i discovered while using nanomorph "in anger".

What is the best way to test issues like these?

// initial state

// Updated state based on input interaction

YOU DID A THING!

— You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub https://github.com/choojs/nanomorph/issues/86, or mute the thread https://github.com/notifications/unsubscribe-auth/ACWleiDPmkYYInoCZxk1F9nlHCYUy07Hks5st3kMgaJpZM4P_ghl .