## 事象 表題のとおり。非表示時にTabボタンでフォーカスが移ると画面が崩れるので見栄えも操作性もよろしくない。 ## 原因 `v-navigation-drawer`は表示が画面外というだけであり、要素は存在するから。 ## 解決方法 [[inert属性]]を指定する。以下のような感じ。 ```html <v-navigation-drawer v-model="threadDrawerStore.show" :inert="!threadDrawerStore.show" location="end" width="750" temporary > <ThreadContainer @posted="handleThreadPosted" /> </v-navigation-drawer> ``` ## 参考 - [Setting tabindex dynamically in a navigation drawer](https://stackoverflow.com/questions/78325393/setting-tabindex-dynamically-in-a-navigation-drawer)