为何Lit组件中<input>的@focus事件仅能正确设置状态一次？

在Lit组件中，date类型<input>的@focus事件监听器本应在输入框获焦时选中值为3的radio输入框，但仅能正常工作一次。

复现步骤 #

• 首次点击date输入框，selectType变为3，值为3的radio正确选中；
• 点击值为0的radio输入框切换状态；
• 再次点击date输入框，selectType虽变为3，但值为0的radio仍处于选中状态。

相关代码 #

import {html, LitElement} from 'lit';
import {customElement, state} from 'lit/decorators.js';

@customElement('simple-greeting')
export class SimpleGreeting extends LitElement {
  @state() selectType = 0;
  
  private _onChange(event: Event) {
    const target = event.target as HTMLInputElement;
    if (target.name == "date-select")
      this.selectType = parseInt(target.value);
  }

  render() {
    return html`
      <form>
        <label>
          <input type="radio" name="date-select" value="0" ?checked="${this.selectType == 0}" @change="${this._onChange}">
          Today
        </label>
        <span> 
          <input type="radio" name="date-select" value="3" ?checked="${this.selectType == 3}" @change="${this._onChange}">
          <input type="date" name="date-enter" @focus="${() => {this.selectType = 3}}">
        </span>
        <p> this.selectType is ${this.selectType} </p>
      </form>`;
  }
}

环境说明 #

该问题在Windows系统的Chrome和Firefox浏览器中均存在，将代码转译为React组件后无此异常。

内容的提问来源于stack exchange，提问作者lyfeng