bug: ref is set to null after rerender due to changing prop value

[averyjohnston]

Prerequisites

• I have read the Contributing Guidelines.
• I agree to follow the Code of Conduct.
• I have searched for existing issues that already report this problem, without success.

Stencil Version

2.13.0

Current Behavior

In the Ionic Framework, on the display test of ion-datetime, changing the presentation prop of the datetime component sometimes causes the ref in renderCalendarBody to fire twice and/or get set to null. (See steps to repro for details)

Expected Behavior

The ref should not be set to null, because the element in question is present in the DOM.

Steps to Reproduce

1. Clone the ionic-framework repo.
2. Open core/src/components/datetime/datetime.tsx. In the renderCalendarBody function, add a console.log to the ref callback like so: <div class="calendar-body ion-focusable" ref={el => { console.log('ref:', el); this.calendarBodyRef = el} } tabindex="0">
3. Run npm run start in the /core directory. Once the build is finished, go here in your browser: http://localhost:3333/src/components/datetime/test/display
4. Change the "presentation" dropdown to "time-date." Note in the console that the ref callback fires twice, receiving null first, then the proper element.
5. Change the "presentation" back to "date-time." Note that the callback fires twice again, but in the opposite order, such that this.calendarBodyRef finishes at null.

Code Reproduction URL

http://localhost:3333/src/components/datetime/test/display

Additional Information

• The source for the display test can be found at /core/src/components/datetime/test/display/index.html.
• Changing "presentation" to "date" only fires the ref once.
• Changing it to "time" sets the ref to null, which in this case is correct behavior, since there is no calendar body to render in this mode.
• renderCalendarBody is called in renderCalendar, which is called in renderDatetime, which returns an array that gets passed directly to the render function.
• Both date-time and time-date presentations lead to the same render functions being called in renderDatetime, just in a different order.

[alicewriteswrongs]

Didn't mean to close this! I think we want to look at a few follow-up things after fixing the problem in Framework, in particular:

• documenting the key attribute behavior which is currently undocumented
• see if we could add a runtime- or compile-time warning to Stencil in cases where not setting a key attr will lead to undesirable behavior (as in, for instance, the issue uncovered here)