pdanpdan / vue-keyboard-trap Goto Github PK

Describe the bug
No import possible as described in example

To Reproduce

import { VueKeyboardTrapDirectiveFactory } from '@pdanpdan/vue-keyboard-trap';

Error: '"@pdanpdan/vue-keyboard-trap"' has no exported member named 'VueKeyboardTrapDirectiveFactory'

Expected behavior
Should be able to import
"@pdanpdan/vue-keyboard-trap": "^1.0.12",

Describe the bug
I tried to use dynamic directive, but it works partially. First round of tabbing escapes the trap. When I go back inside (e.g. using [SHIFT] + [TAB]), the trap works.

<dialog v-kbd-trap='visible'>
  <!-- content -->
</dialog>

Example on CodeSandbox

To Reproduce
Steps to reproduce the behavior:

1. Use v-kbd-trap="enabled" on a rendered element
2. Open a dialog (should change enabled to true)
3. Click [TAB] few times
   • This will focus elements outside of the dialog
4. Click [SHIFT] + [TAB] to get back into the dialog
5. Click [TAB] few times again
   • This will keep focus inside the dialog

Expected behavior
The directive should keep focus inside all the time

Recording

Environment:

• OS: Ubuntu 20.04
• Browser: Chrome, Edge, Firefox (latest versions)

Workaround
Additional <div> with v-if... so actually it means you cannot use "dynamic" mode at all.

<dialog>
  <div v-if='visible' v-kbd-trap>
    <!-- content -->
  <div>
</dialog>