`<wa-input>` と `<wa-combobox>` の `autocorrect` 型修正と仮想キーボード対応プロパティの追加

<wa-input> の autocorrect プロパティが文字列ユニオン型からboolean型に修正され、<wa-combobox> にも仮想キーボードをカスタマイズするための複数プロパティが追加されました。

背景

autocorrect はHTMLの属性値として "off" / "on" の文字列を取りますが、Webコンポーネントのプロパティとしてはboolean型で扱う方が自然です。これまで <wa-input> では autocorrect: 'off' | 'on' という文字列ユニオン型で定義されており、プロパティとして利用する際にboolean型との使い勝手の不一致が生じていました。同様に、<wa-combobox> では仮想キーボード制御に関わる autocapitalize、autocorrect、enterkeyhint、inputmode、spellcheck の各プロパティが不足しており、モバイル環境での入力体験を細かく制御できない状況でした。

また、<wa-combobox> には autocomplete プロパティが存在していましたが、これはブラウザネイティブのHTML属性と名前が衝突し、意図しない動作を引き起こす可能性がありました。

技術的な変更

input.ts における autocorrect の型定義が、カスタムコンバーターを持つboolean型プロパティに変更されました。これにより、HTML属性としては従来通り "off" / "on" 文字列を受け付けつつ、JavaScriptプロパティとしては true / false で扱えるようになっています。

変更前:

/** Indicates whether the browser's autocorrect feature is on or off. */
@property() autocorrect: 'off' | 'on';

変更後:

/**
 * Indicates whether the browser's autocorrect feature is on or off. When set as an attribute, use "off" or "on".
 * When set as a property, use true or false.
 */
@property({
  type: Boolean,
  converter: {
    fromAttribute: value => (!value || value === 'off' ? false : true),
    toAttribute: value => (value ? 'on' : 'off'),
  },
})
declare autocorrect: boolean;

fromAttribute では、属性値が null（属性なし）または 'off' の場合に false を返し、それ以外を true とすることで、属性の省略をオフ扱いに統一しています。toAttribute ではboolean値をブラウザが解釈できる 'on' / 'off' 文字列に変換して出力します。

テンプレート側のバインディングも合わせて修正されています。

変更前:

autocorrect=${ifDefined(this.autocorrect)}

変更後:

autocorrect=${this.autocorrect ? 'on' : 'off'}

ifDefined を外したことで、autocorrect は常にネイティブ <input> に明示的に設定されます。boolean型に変わったことで undefined が入らなくなったため、ifDefined を使う必要がなくなりました。

changelogによると、<wa-combobox> には autocapitalize、autocorrect、enterkeyhint、inputmode、spellcheck の各プロパティが追加され、仮想キーボードの挙動をコンポーネント側から制御できるようになっています。また、ネイティブHTML属性と名前が衝突していた autocomplete プロパティは削除されました。

設計判断

属性とプロパティのデュアルインターフェースを維持しながら、JavaScriptからの利用においてboolean型を採用した点が重要な設計判断です。Lit の @property デコレーターのカスタムコンバーター機能を活用することで、HTMLテンプレートからの属性指定（autocorrect="off"）とJavaScriptからのプロパティ操作（el.autocorrect = false）の両方を自然な形でサポートしています。

autocomplete プロパティを <wa-combobox> から削除した判断は、WebコンポーネントとネイティブHTML仕様の共存において典型的なトレードオフを示しています。コンボボックスは独自の補完ロジックを持つコンポーネントであり、ブラウザのネイティブオートコンプリートと同名のプロパティを持つことは予期しない動作の原因になり得ます。削除によって仕様の曖昧さを排除し、コンポーネントの責務を明確にしています。

まとめ

autocorrect の型をboolean型に統一したことで、<wa-input> はJavaScriptの慣習に沿ったAPIを提供しつつ、HTMLの仕様とも整合性を保つようになりました。<wa-combobox> への仮想キーボード関連プロパティの追加と autocomplete の削除は、ネイティブHTML属性との共存を慎重に設計した結果であり、Webコンポーネントにおけるプロパティ設計の実践的な指針となる変更です。