Current version of focus-trap is 6.0.1 so it gives me a warning to install ^5.0.2

Also it would be better to not specify the peer dependency versions down to the patch level.

In the Vue2 version (1.x) the following was valid:

<template>
  <FocusTrap ref="focusTrap">
    <!-- Content here -->
  </FocusTrap>
</template>

<script>
export default {
  methods: {
    manuallyDeactivate() {
      this.$refs.focusTrap.deactivate()
    }
  }
} 
</script>

The activate and deactivate methods were exposed on the component. The documentation speaks to their usage as well.

This is no longer possible in the Vue3 (2.x / 3.x) version as the methods are not being exposed on the component.

Reproduction

Just visit the page https://www.npmjs.com/package/focus-trap-vue, and change .mount('#app) to be .mount('#app'). There's just a missing ending single apostrophe. It looks like it correct in your README.md but not on npmjs.com.

<Nav> // method triggers store commit that opens parent modal
<ParentModal> // parent modal has slot that populates with a child modal based on store commit data
<ChildModal> // child modal has input element that needs focus

When I set the focus trap on the ParentModal I an unable to set initial-focus in the ChildModal.

• I tried using $nextTick for ChildModal ref.
• This worked but gave me a console error 'focus trap expects a node ref'. I used a ref on the Parent to a Child method that set focus on the ref. I even tried returning the ref as a node.

Please advise.

What problem is this solving

Prevents scroll jumps when focusing both <focus-trap> target HTMLElement and returnFocusOnDeactivate target HTMLElement.

Proposed solution

Implement what original focus-trap library uses (preventScroll create option and tryFocus function):

focus-trap's preventScroll create option

focus-trap's tryFocus function

We should have a tryFocus function called that passes preventScroll: true as FocusOptions in HTMLElement.focus(FocusOptions) method when focusing target HTMLElements.

Describe alternatives you've considered

There are ways to dodge scrolling issues, but it would require using position: fixed on target HTMLElements.

Reproduction

Passing the any value to the FocusTrap component's :prevent-scroll property is ignored.

Steps to reproduce the behavior

1. Create a component with <FocusTrap :prevent-scroll="true">
2. The embedded trap does not initialize with preventScroll: true

Expected behavior

The FocusTrap component should take the defined preventScroll property and hand it down to the embedded focus-trap instance.

Actual behavior

The preventScroll property is defined, but ignored by the component.

Additional information

There are other properties that are defined but not passed through to the embedded trap. This report only focuses on preventScroll.

Reproduction

Hi, thanks for vue3 version, but now it has some issues.

At first, it only works if use it as <FocusTrapVue>, the tag from version 2 <FocusTrap> returns an error - something with querySelector

And second, if use it as FocusTrapVue, you get a warning about correct exporting custom files.

Hello and thank you for working on this package. I noticed a potential bug related to #380. Here's a description of the issue.

Context

Whenever the focus trap becomes active, and the sole element in the focus trap is another Vue component (at least that seems to be the case), an error will be thrown in the console.

Reproduction

I've created a CodeSandbox instance where you can see the behavior for yourself.

Steps to reproduce the behavior

1. Click on the "Toggle trap focus" button
2. See error

Expected behavior

Focus trap should kick in as the active prop is set to true.

Actual behavior

Received the following error when setting the active prop to true.

index.js:25 Uncaught (in promise) TypeError: el.querySelectorAll is not a function
    at getCandidates2 (index.js:25)
    at tabbable2 (index.js:243)
    at index.js:226
    at Array.map (<anonymous>)
    at updateTabbableNodes2 (index.js:225)
    at Object.activate (index.js:546)
    at watch.immediate (focus-trap-vue.esm-bundler.js:80)
    at callWithErrorHandling (runtime-core.esm-bundler.js:154)
    at callWithAsyncErrorHandling (runtime-core.esm-bundler.js:163)
    at job (runtime-core.esm-bundler.js:2096)

Additional information

I first discovered this issue on Electron, and did a little debugging there to look at what el is. It turns out when the element inside of <focus-trap> is a Vue component, instead of an HTMLElement, a Proxy of the Vue component is passed.

For clarity, I tried changing the element in the focus trap to a regular <div> and it worked as you'd expect.

Nov 12th, 2021
Dug a bit deeper to understand a bit more about the dependencies here.
The error is thrown from tabbable, which is a dependency of focus-trap, of which this library depends on. Looks like focus-trap is a expected to work in a framework-less scenario.

A bit more digging shows that this library is using the as keyword in TypeScript on line 65 in the FocusTrap.ts file. Pasting that block here for context:

   const el = ref<HTMLElement | null>(null)

    const ensureTrap = () => {
      if (trap) {
        return
      }

      const { initialFocus } = props
      trap = createFocusTrap(el.value as HTMLElement, {

I'm not familiar with Vue's API for plugins but if I understand it correctly, el is set during render, particularly on line 143 in the same file?

Nov 13th, 2021
Cloned the repo to try see if I can figure something out.

I'm away from my computer now, but when I tried earlier, I was able to "fix" the issue. I'm not sure if it's the right thing to do, however.

First, I added the ComponentPublicInstance type (from vue) to the union for el.

Then I added an extra check before createFocusTrap is called, like so

  if (
    !(el instanceof HTMLElement) &&
    Reflect.has(el.value, "$el")
  ) {
    el.value = (el.value as ComponentPublicInstance).$el;
  }

  trap = createFocusTrap(el.value as HTMLElement, {

However, one thing that's notable is that $el has type any within ComponentPublicInstance, not HTMLElement. Hence why I'm not sure if this is a good solution.

I'll likely check things out a bit further, get a bit more guarantee in before I make a PR.

Related issues found: #380

As per vuejs/core@49bb447 watcher flush got changed. This library is affected, although not in all cases. I'll update the test cases soon to prove my point.

Following the basic instructions to install and use.

Code snippet:

<template>
  <FocusTrap v-model:active="focusTrapActive">
    <MDBModal ...>
    ...
    </MDBModal>
  </FocusTrap>
<template>

When focusTrapActive is set I get the following stack trace:

index.esm.js?62f7:10 Uncaught (in promise) TypeError: el.querySelectorAll is not a function
    at getCandidates (index.esm.js?62f7:10)
    at tabbable (index.esm.js?62f7:206)
    at eval (focus-trap.esm.js?e16c:237)
    at Array.map (<anonymous>)
    at updateTabbableNodes (focus-trap.esm.js?e16c:236)
    at Object.activate (focus-trap.esm.js?e16c:519)
    at Object.immediate (focus-trap-vue.esm-browser.js?164c:80)
    at callWithErrorHandling (runtime-core.esm-bundler.js?5c40:6656)
    at callWithAsyncErrorHandling (runtime-core.esm-bundler.js?5c40:6665)
    at Array.job (runtime-core.esm-bundler.js?5c40:7056)

What problem is this solving

I am getting the error "Your focus-trap must have at least one container with at least one tabbable node in it at all times".

Proposed solution

The solution is to expose the parameter delayInitialFocus from the focus-trap library and set it to false as per focus-trap/focus-trap-react#91

Hello 👋
For my own project I forked and upgraded this library with Vue 3 API. Would you be interested in joining our effort to merge these changes for a vue 3 compat ?

looks roughly like that

import { defineComponent, onMounted, watch, ref, cloneVNode, onUnmounted } from 'vue';
import createFocusTrap, { FocusTrap as FocusTrapI } from 'focus-trap';

const FocusTrap = defineComponent({
  props: {
    active: {
      // TODO: could be options for activate
      type: Boolean as () => boolean,
      default: true,
    },
    escapeDeactivates: {
      type: Boolean as () => boolean,
      default: true,
    },
    returnFocusOnDeactivate: {
      type: Boolean as () => boolean,
      default: true,
    },
    allowOutsideClick: {
      type: Boolean as () => boolean,
      default: true,
    },
    initialFocus: {
      type: [String as () => string, Function as () => () => HTMLElement],
      default: undefined,
    },
    fallbackFocus: {
      type: [String as () => string, Function as () => () => HTMLElement],
      default: undefined,
    },
  },
  setup (props, { slots, emit }) {
    let trap: FocusTrapI | null;
    const el = ref<HTMLElement | null>(null);
    onMounted(function () {
      watch(() => props.active, (active) => {
        if (active && el.value) {
          // has no effect if already activated
          trap = createFocusTrap(
            el.value,
            {
              escapeDeactivates: props.escapeDeactivates,
              allowOutsideClick: () => props.allowOutsideClick,
              returnFocusOnDeactivate: props.returnFocusOnDeactivate,
              onActivate: () => {
                emit('update:active', true);
                emit('activate');
              },
              onDeactivate: () => {
                emit('update:active', false);
                emit('deactivate');
              },
              initialFocus: typeof props.initialFocus === 'string' ? props.initialFocus : props.initialFocus?.() ?? el.value,
              fallbackFocus: props.fallbackFocus,
            },
          );
          trap.activate();
        } else {
          trap?.deactivate();
        }
      },
      { immediate: true },
      );
    });
    onUnmounted(() => {
      trap?.deactivate();
      trap = null;
    });
    return () => {
      const content = slots.default?.();
      if (!content || !content.length || content.length > 1) { throw new Error('FocusTrap requires exactly one child'); };
      const vnode = cloneVNode(content[0], { ref: el });
      return vnode;
    };
  },
});

export { FocusTrap };

```