Input loses focus when conditionally rerendering other divs

I’ve set up this JS fiddle to demonstrate the behavior I’m seeing.

Basically when I render this code:

<section>
    { phone && !App.isValidPhoneNumber(phone) ? <div>Invalid Phone Number</div> : null }
    <input value={phone} onInput={this.linkState('phone')} />
    { /* Weird: if you remove the line below, there's no error... */ }
    <div>Phone: {phone}</div>
</section>

As soon as the state changes such that the first line’s condition becomes true, the input loses focus. Is this a bug or expected behavior?

Update: Added GIF to illustrate behavior.

Update 2: I’ve noticed a pattern now, that this only happens if there’s two other elements of the same type. e.g. if there’s two div tags (like in the example above), this doesn’t happen if one of them is changes to a strong tag, but happens again if both are. Wondering if it’s some sort of recycling issue…? Still not sure why it would affect the input.

[developit]

Confirmed this is fixed in Preact 8! 😊

[developit]

Interesting. I am happy keys fixes this, but I want to better understand why the diff is removing an element there. Will be looking into it 😃