Router コンポーネントの FocusOnNavigate クラスはあるページから別のページに遷移した後、CSS セレクターに一致する要素にフォーカスを設定します。
Selector プロパティはページ間のナビゲーション後にフォーカスする要素を記述する CSS セレクターを取得または設定します。
これによりユーザーは別のページに遷移したあと、特定の要素にフォーカスを当てることができます。
ここでは IgbInput に自動的にフォーカスを当てる方法についてご紹介します。

まずは FocusOnNavigate の Selector に任意のセレクタを指定します。
ここでは “OnFocus” と指定します。

    <Found Context="routeData">
        <RouteView RouteData="@routeData" 
                   DefaultLayout="@typeof(MainLayout)" />
        <FocusOnNavigate RouteData="@routeData" 
                         Selector="[OnFocus]" />
    </Found>

次に IgbInput にフォーカスするためのセレクタを指定します。
こちらにも “OnFocus” を指定します。

@page "/PageA"
<div style="width:200px;">
	<PageTitle>PageA</PageTitle>
	<h1>Page A</h1>
	<IgbInput OnFocus 
		      Placeholder=input>
		<span slot="prefix">A</span>
	</IgbInput>
</div>

これでページ遷移後に IgbInput が自動でフォーカスされるようになります。

実行結果

実際のフォーカスの様子はこちらのようになります。

関連ドキュメント

Tagged:

製品について

Ignite UI for Blazor