As per https://github.com/vuejs/vue-next/commit/49bb44756fda0a7019c69f2fa6b880d9e41125aa watcher flush got changed. This library is affected, although not in all cases. I'll update the test cases soon to prove my point.

What kind of change does this PR introduce? (check at least one)

• [ ] Bugfix
• [X] Feature
• [ ] Code style update
• [X] Refactor
• [X] Build-related changes
• [ ] Other, please describe:

Does this PR introduce a breaking change? (check one)

• [X] Yes
• [ ] No

If yes, please describe the impact and migration path for existing applications:

The PR fulfills these requirements:

• [ ] When resolving a specific issue, it's referenced in the PR's title (e.g. fix #xxx[,#xxx], where "xxx" is the issue number)
• [ ] All tests are passing
• [ ] New/updated tests are included

If adding a new feature, the PR's description includes:

• [ ] A convincing reason for adding this feature (to avoid wasting your time, it's best to open a suggestion issue first and wait for approval before working on it)

Other information:

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 };

```

The focus-trap library was updated in version 6.7.0 to fix an issue with the type used for the initialFocus option where passing false or a function that returns false was not allowed.

The relevant release is tagged here: https://github.com/focus-trap/focus-trap/releases/tag/v6.7.0

Updating the type to include the Boolean constructor will allow users of the Vue component to pass the false literal for the :initial-focus prop. A function returning false already passed the Vue type check but in previous versions of focus-trap would raise an error. This was also fixed in 6.7.0:

https://github.com/focus-trap/focus-trap/commit/14b0ee830bd6d25fd86bac38135a590f98f43d25#diff-a3ce29c1c993dbf3f968461bb3ff5e3f522d8b0c94cc2ca8f6b3ef7a9eda3621R209-R212

Updating the peer and dev dependencies to be at least 6.7.0 allows vue-focus-trap to have the correct behavior and types and to match the latest documentation for the focus-trap library.

This PR aims to fix the issue in #385 (and #380).

As mentioned in #385, I'm not entirely sure if ComponentPublicInstance is the right type for arbitrary Vue components, and I am also rather unfamiliar with the internals of Vue, as I am mostly just a user of the framework.

But the basic idea is that we should make sure that the underlying or rendered HTMLElement is passed to createFocusTrap instead of a Proxy of a Vue component.

PR Summary

What kind of change does this PR introduce? (check at least one)

• [x] Bugfix

Does this PR introduce a breaking change? (check one)

• [x] No

If yes, please describe the impact and migration path for existing applications:

The PR fulfills these requirements:

• [x] When resolving a specific issue, it's referenced in the PR's title (e.g. fix #xxx[,#xxx], where "xxx" is the issue number)
• [x] All tests are passing
• [x] New/updated tests are included

PS: I've read the contribution guidelines but I still don't feel confident if what I'm doing is considered respectful or rude. Please feel free to point out if I'm doing something incorrectly.

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

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.

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.

Bumps focus-trap from 5.1.0 to 6.0.1.

Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.

If all status checks pass Dependabot will automatically merge this pull request.

Bumps typescript from 3.7.5 to 4.0.2.

Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.

If all status checks pass Dependabot will automatically merge this pull request.

Bumps typescript from 3.7.5 to 3.9.6.

Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.

If all status checks pass Dependabot will automatically merge this pull request.