## Issue
https://github.com/tadashi-aikawa/obsidian-various-complements-plugin/issues/243
## 調査
### フォーカスを外す方法はあるか?
`suggestions.setSelectedItem(undefined, event)`でフォーカス自体は外れるが問題がある。
- その後に候補選択キー(上下)を押しても、候補にフォーカスが当たらない
- 第2引数にeventがあるため、コマンド実行時にしかフォーカスが外れなそう
- `onOpen`や`onClose`がなく、候補が表示/非表示になる直前に処理を差し込めない
難読化された実装を調べてハックすればできなくはないかもしれないが、そんなことをしてもメンテする自信もなければ、実装コストも高いのでやりたくない。
ということでこの時点で一度断っている。
<div class="link-card">
<div class="link-card-header">
<img src="https://github.githubassets.com/favicons/favicon.svg" class="link-card-site-icon"/>
<span class="link-card-site-name">GitHub</span>
</div>
<div class="link-card-body">
<div class="link-card-content">
<div>
<p class="link-card-title">FR: Make suggestions confirmable only after pressing the key to make a selection. · Issue #243 · tadashi-aikawa/obsidian-various-complements-plugin</p>
</div>
<div class="link-card-description">
I use the Enter key to confirm suggestions, but I often accidentally confirm a suggestion when I wan...
</div>
</div>
<img src="https://opengraph.githubassets.com/bff4552fab8ef381c9f6247d4f26f6ba4551d39b77c19c516fc488ab68a10ea0/tadashi-aikawa/obsidian-various-complements-plugin/issues/243" class="link-card-image" />
</div>
<a href="https://github.com/tadashi-aikawa/obsidian-various-complements-plugin/issues/243#issuecomment-1684942393"></a>
</div>
### 発想を変えてみる
しかしふと思い立った。発想を変えればいいのでは? フォーカスを外すのではなく、『フォーカスは当たっていても、候補を選択するキーを押す前にEnterなどが押されたら貫通させればいい』のでは?
ためしに`confirmationLock = true;`という[[プロパティ (TypeScript)|プロパティ]]を追加して
- 候補を選択するキー(上下)が押されたあとに`false`へ変更
- 候補を決定するキー(Enter)が押されたときに`confirmationLock`が`true`ならスルー
- `onTrigger` (オートコンプリート発動可否を判定する処理) の最初で`confirmationLock = true`にする
としてみたら、期待通り動きそうだった。懸念点は2点。
- 実装が複雑になる
- 見た目上はフォーカスが当たっているのに貫通してしまう
前者は諦めるとして、後者はCSSの調整でなんとかできるのではという気がする。`.is-selected`を消したら見た目が期待通りになるので試してみる。
```ts
document.querySelector(".is-selected").removeClass("is-selected")
```
粗いけど上記でいけた。`document`は`activeWindow.activeDocument`を使う。ただ、これだとDOMが構築されてから削除する必要があり、厳しい気がする。少し発想を変え、**`<body>`に`various-complements__selection-lock`クラスを追加**して
```css
.various-complements__selection-lock .is-selected {
background-color: red;
}
```
とする方針でいく。
```ts
document.querySelector("body").addClass("various-complements__selection-lock")
document.querySelector("body").removeClass("various-complements__selection-lock")
```
```css
.various-complements__selection-lock .various-complements__suggestion-item.is-selected {
background-color: inherit;
border: dotted 1px;
}
```