Webページに追加したテキストフォーム内で、ショートカットキーが有効になってしまう

YouTubeの動画ページに追加したテキストフォームに、tagifyというライブラリを適用してタグ入力フォームを作成すると、そのフォーム内でショートカットキーが有効になってしまいます。

例えば、「fuga」と入力すると「f」キーの機能が呼び出されて、動画が全画面表示になります。

tagifyの機能を維持しつつ、テキストフォーム内でのショートカットキーを無効にする方法を教えて下さい。

試したこと

※以下で前提とするコード

HTML
1<div id="target-wrap">
2    <input id="target"></input>
3</div>

JavaScript
1const input = document.querySelector('#target');
2// settingsは省略。
3let tagify = new Tagify(input);

キー入力イベントの伝播を止める。

stopPropagationメソッドを使って、タグ入力フォームより上の要素にキー入力イベントが伝播するのを止めてみました。

JavaScript
1$('#target > tags > span').on('keydown', e => {
2    e.stopPropagation();
3});

しかしそうすると、tagifyが表示するselectboxが表示されなくなってしまいました。

selectboxの追加先を変更する。

tagifyが表示するselectboxの追加先はdropdown.appendTargetの値で示され、デフォルトではdocument.bodyになっています。

これを変更し、タグ入力フォームの近くに追加して、先述のstopPropagationでキー入力イベントを囲い込もうとしました。

JavaScript
1const input = document.querySelector('#target');
2let tagify = new Tagify(input, {
3    dropdown: {
4        appendTarget: document.querySelector('#target-wrap')
5    }
6});
7
8$("#target-wrap").on('keydown', e => {
9    e.stopPropagation();
10});

しかしそうすると、またselectboxが表示されなくなってしまいました。

現状

現在は妥協策として、selectboxの操作に使うキー入力の伝播のみを許可する、という実装にしています。

JavaScript
1$('#target > tags > span').on('keydown', e => {
2    const allowedKeys = ['Enter', 'ArrowUp', 'ArrowDown'];
3    if ( allowedKeys.includes(e.key) ) return true;
4    e.stopPropagation();
5});