useActiveElement and useFocusWithin are not working

[dylanalizon]

Describe the bug

The two composables don't work properly.

useActiveElement is not reactive, so useFocusWithin doesn't work either (it uses useActiveElement).

The examples in the documentation reproduce the problems.

Workaround:

• An empty watcher on useActiveElement fix the problem

Reproduction

https://vueuse.org/core/useActiveElement/

System Info

System:
    OS: macOS 13.0
    CPU: (10) arm64 Apple M1 Max
    Memory: 328.92 MB / 32.00 GB
    Shell: 5.8.1 - /bin/zsh
  Binaries:
    Node: 20.10.0 - ~/.nvm/versions/node/v20.10.0/bin/node
    Yarn: 1.22.19 - ~/.nvm/versions/node/v20.10.0/bin/yarn
    npm: 10.2.3 - ~/.nvm/versions/node/v20.10.0/bin/npm
    pnpm: 8.15.1 - ~/.nvm/versions/node/v20.10.0/bin/pnpm
  Browsers:
    Chrome: 121.0.6167.139
    Safari: 16.1
  npmPackages:
    @vueuse/core: ^10.7.2 => 10.7.2 
    vue: ^3.2.47 => 3.4.15

Used Package Manager

yarn

Validations

• Follow our Code of Conduct
• Read the Contributing Guidelines.
• Read the docs.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• Make sure this is a VueUse issue and not a framework-specific issue. For example, if it's a Vue SFC related bug, it should likely be reported to https://github.com/vuejs/core instead.
• Check that this is a concrete bug. For Q&A open a GitHub Discussion.
• The provided reproduction is a minimal reproducible example of the bug.

[huiliangShen]

it's because of vue/core bug 10114 and vueuse docs dependent vue@3.4.13, so it's not working only vueuse documentation!
you can update vue@lasted version if you want to these hooks normally working on your project.

[gkubisa]

@dylanalizon While reactivity of useActiveElement works initially with vue@3.4.15, it can be easily lost. Here's how I can still reproduce it every time:

1. Copy the example from https://vueuse.org/core/useActiveElement/ into a project using vue@3.4.15.
2. Focus the example inputs - works.
3. Focus the browser address bar.
4. Focus the example inputs again - does NOT work.

Could you reopen this task, please?

cc @huiliangShen

[gkubisa]

I reported it again in #3774 because the problem persists with the latest version of vue and vueuse.

[dylanalizon]

There is a reactivity problem on vue@3.4.15, it's working with vue@3.4.14. It's already reported on Vue core repository

[huiliangShen]

@dylanalizon While reactivity of useActiveElement works initially with vue@3.4.15, it can be easily lost. Here's how I can still reproduce it every time:

1. Copy the example from https://vueuse.org/core/useActiveElement/ into a project using vue@3.4.15.
2. Focus the example inputs - works.
3. Focus the browser address bar.
4. Focus the example inputs again - does NOT work.

Could you reopen this task, please?

cc @huiliangShen

@gkubisa I can't reopen this issue, sorry... You can try to use @dylanalizon said, replace vue@3.4.15 to vue@3.4.14 to test again.

[mrleblanc101]

Still does not work in the latest 3.4.27, reverting to 3.4.14 indeed fixed the issue