Null reference scenario with unkeyed children

[mstijak]

I found a problem with using ref on unkeyed children. You can observe the problem here: https://jsfiddle.net/rsm2dxb7/1/
Open the console and click Toggle. You'll see that the final dom reference being passed is null, which is wrong because the referenced div is still there.

In the example, the first child is conditionally rendered and the second child is using a ref. On click, the state changes and the first child is unmounted. The ref callback is called two times in wrong order, so the final reference value is null.

{ header && <div className="header">Header</div> }
<div ref={c=>{
  console.log(c);
}}>
  Content
</div>

[mstijak]

Here's a failing test:

it('should correctly call child refs for un-keyed children on re-render', () => {
	let el = null;
	let ref = e => { el = e };

	class App extends Component {
		render({ headerVisible }) {
			return <div>
				{ headerVisible && <div>Header</div> }
				<div className="content" ref={ref}>
					Content
				</div>
			</div>;
		}
	}

	let root = render(<App headerVisible />, scratch);
	expect(el).to.not.be.equal(null);
	root = render(<App />, scratch, root);
	expect(el).to.not.be.equal(null);
});

[developit]

Interesting, this seems to happen due to elements shifting on removal.
It seems like the removed element in this case should be bypassed in the next diff pass:
https://github.com/developit/preact/blob/master/src/vdom/diff.js#L228

[mstijak]

I read somewhere that preact v8 preserves empty slots. That approach might also be useful here, as in that case, the second div would not morph into the first one.

[developit]

Yup - that's why I was surprised to see this issue.

[Rendalf]

Recently stumbled across the same issue.
Any options how to fix/avoid that?

[yaodingyd]

Essentially duplicate of #857.
Although this was raised earlier, looks like the main discussion is in #857.
@Rendalf For now unkeyed diff has this issue which cannot be resolved. You can use keyed children if possible.

[marvinhagemeister]

Related to #1440