IgbCombo – テキスト入力欄への直接入力をできないようにする

Ignite UI for Blazor が提供するコンボボックスコンポーネント、IgbCombo はテキスト入力欄を備えており、単一選択モードが有効 (SingleSelect=true) な場合は、そのテキスト入力欄への直接入力で選択肢を絞り込んだり選択したりすることが可能です。

しかしながら要件によっては、IgbCombo のテキスト入力欄への直接入力は禁止したい場合があります。そのような場合は、以下のように JavaScript プログラムと組み合わせて実装することで実現可能です。

まず、IgbCombo のテキスト入力欄を読み取り専用 (readOnly = true) に設定する、以下の JavaScript プログラムを記述し、.js ファイルとして wwwroot フォルダ以下に配置します。そしてこの .js ファイルを、wwwroot/index.html などのフォールバックページ内から script タグで読み込んでおくようにします。

igRegisterScript("makeReadOnly", (ctx) => {
    const combo = ctx.target;
    combo
      .shadowRoot.querySelector("igc-input")
      .shadowRoot.querySelector("input")
      .readOnly = true;
}, false);

その上で、テキスト入力欄への直接入力を無効にしたい IgbCombo について、”FocusScript” パラメーターに、上記で実装した JavaScript のスクリプト登録名を指定します。

<IgbCombo Data="..."
          DisplayKey="..."
          ValueKey="..."
          SingleSelect="true"
          FocusScript="makeReadOnly">
</IgbCombo>

このように実装することで、対象の IgbCombo にフォーカスが当たるタイミングで、IgbCombo 内のテキスト入力要素が読み取り専用となり、直接入力ができないようになります。