Vaadin v22 DateTimePicker component renders twice

Question

I have a Vaadin form with a DateTimePicker component that renders twice. I've been unable to determine what is causing it. The form template was generated by Vaadin Designer.

Vaadin vers: 22 Vaadin plugin vers: 4.6.11

LitElement template:

import { LitElement, html, css, customElement } from 'lit-element';
import '@vaadin/vaadin-form-layout';
import '@vaadin/date-time-picker';

@customElement('input-form')
export class InputForm extends LitElement {
  static get styles() {
    return css`
      :host {
          display: block;
          height: 100%;
      }
      `;
  }

  render() {
    return html`
      <vaadin-form-layout>
        <vaadin-date-time-picker id="appearanceDt" label="Appearance Date" .step="${60 * 15}"></vaadin-date-time-picker>
      </vaadin-form-layout>
    `;
  }

  // Remove this method to render the contents of this view inside Shadow DOM
  createRenderRoot() {
    return this;
  }
}

Java Template Class:

@Tag("input-form")
@JsModule("./src/views/input-form.ts")
public class InputForm extends LitTemplate {

@Id("appearanceDt")
private DateTimePicker appearanceDt;

The rendered page:

Also interesting, only the first pair of elements get bound to the Java template class. The other two are not bound:

Answer 1

Upgrading to version 22.02 fixed the issue completely.