IgbButton を submit ボタンとして機能させる

Ignite UI for Blazor が提供するボタンコンポーネント IgbButton コンポーネントについて、DisplayType プロパティに “ButtonBaseType.Submit” を指定すると、IgbForm コンポーネント内でそのような IgbButton を配置し、ユーザーがこのボタンをクリックすることで IgbForm の “送信” (Submit) イベントを発射させることができます。

以下の情報は 2022年9月現在・Ignite UI for Blazor 22.1.41 バージョン時点での情報に基づいています。より新しいバージョンでは変更・改善されている可能性があります。最新情報は こちらのリンク先 (GitHub) でご確認頂けます。

しかし 2022年9月現在、DisplayType プロパティに “ButtonBaseType.Submit” を指定した IgbButton を、(IgbForm ではなく) Blazor 標準の EditForm コンポーネントや、HTML 標準の <form> 要素内に配置した場合、このボタンをユーザーがクリックしても、それら EditForm コンポーネントあるいは form 要素の送信系のイベントが発生しません。

回避策としては、IgbButton コンポーネントを次のとおり HTML 標準の button 要素で包むことでこの問題を回避可能です。

<EditForm Model="..." OnValidSubmit="OnSubmit">
  <!--
  ? 下記のとおり、枠線なし & Tab キーのフォーカス移動に反応しない、type=submit の button 要素で、IgbButton をくるむ
  -->
  <button type="submit" tabindex="-1" style="padding:0; boder:none;">
    <IgbButton DisplayType="ButtonBaseType.Submit">Submit</IgbButton>
  </button>
</EditForm>