Render issue with selected option in firefox

Which package(s) are affected?

Lit Core (lit / lit-html / lit-element / reactive-element)

Description

Summary: When changing the currently selected <option> of a <select> tag in Firefox, using the render() function. An unexpected behavior happens. See the full reproduction case in copy. The problem does not occur on Chrome browser.

Details: I have a <select> tag containing the 12 monthes of the year and two buttons prev and next. When a button is pressed, the current date is modified and a render is triggered. In the render the month of the current date is selected using the selected attribute of the corresponding <option>. Il you press the prev button 13 times, the <select> elements gets stucked at Janvier.

If you look at the dom elements while doing the previous action, the selected attributes are correctly set on the right elements.

Reproduction

import "./styles.css";
import { html, LitElement } from "lit";
import { keyed } from "lit/directives/keyed.js";

class MyElement extends LitElement {
  static get properties() {
    return {
      mood: { type: String }
    };
  }

  constructor() {
    super();
    this.mood = "happy";
    this.currentDate = new Date();
  }

  getMonthList(locales = null, format = "long") {
    const year = new Date().getFullYear();
    const monthList = [...Array(12).keys()]; // [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11]
    const formatter = new Intl.DateTimeFormat(locales, {
      month: format
    });

    const getMonthName = (monthIndex) =>
      formatter.format(new Date(year, monthIndex));

    return monthList.map(getMonthName);
  }

  capitalizeFirst(str) {
    if (str != null && str.length > 0) {
      return str[0].toUpperCase() + str.substring(1);
    }
    return str;
  }

  render() {
    const monthList = this.getMonthList("fr-FR", "long").map((month) =>
      this.capitalizeFirst(month)
    );
    const monthOptions = monthList.map(
      (month, index) =>
        html`${keyed(
          index,
          html`
            <option
              value="${index}"
              ?selected=${this.currentDate.getMonth() === index}
              >${month}</option
            >
          `
        )}`
    );
    return html` <button @click=${this.onprev}>prev</button>
      <select class="str-datepicker-select">
        ${monthOptions}
      </select>
      <button @click=${this.onnext}>next</button>`;
  }

  onprev(evt) {
    this.currentDate.setMonth(this.currentDate.getMonth() - 1);
    this.requestUpdate();
  }
  onnext(evt) {
    this.currentDate.setMonth(this.currentDate.getMonth() + 1);
    this.requestUpdate();
  }
}

customElements.define("test-element", MyElement);

Workaround

I have not found any workarount.

Is this a regression?

No or unsure. This never worked, or I haven’t tried before.

Affected versions

tested with 2.2.2, 2.4.0

Browser/OS/Node environment

Browser: Firefox 105.0.3 (64 bits) Windows

[benoit-romito]

hi @augustjk, clever workaround. It works well, a bit hacky but it works thanks for your answers 😃 !

[sorvell]

Just a quick add to @augustjk 's answer which is definitely the best approach. It’s also possible to bind the selected property instead of the attribute to avoid the core issue: https://lit.dev/playground/#gist=6795e869d3bfbbda311ad394e3d65b82