🍬
Sapper の goto() で遷移したときにフォーカスを維持する
Svelte のフレームワーク、Sapper には Svelte にないルーティングに関する一式の機能が含まれています。
そのなかに goto というプログラマブルに URL を変更するメソッドがあります。
import { goto } from '@sapper/app';
// Sapperで定義されたルートに遷移
await goto('/blog/1234');
// Sapper以外のURLに遷移
await goto('/static/images/photo.jpg');
// 外部サイトのURLに遷移
await goto('https://example.com/externals');
この goto メソッド、実行時に現在のフォーカスを外す処理が実行されます。
これは、アクセシビリティの観点から追加された処理のようです。
ただ、たとえば検索フィールドの入力内容をクエリに連携するみたいなケースではやや厄介な実装です。
そこで、上記の Issue ではフォーカスを維持したいフィールドの onBlur ハンドラを無効化するアイデアが提案されています。
<input bind:this={input} />
<script>
let input
$: noBlur(input)
function noBlur(input) {
input.originalBlur = input.blur
input.blur = () => {}
}
// input からのフォーカスを外す
input.originalBlur();
</script>
かなりハック的なアイデアですが、共通処理として実装されている以上、この回避策は致し方ないかなと思います。
良い Sapper Live を！
Discussion