Vue version

3.3.9

Link to minimal reproduction

https://github.com/observerly/observerly

Steps to reproduce

Essentially, since upgrading from Vue v3.3.8 to Vue v3.3.9 overnight, a lot of interactions within my web app have broken. I have tried to pin point what is causing it, but I feel like it is very deep and sadly, I do not have the knowledge, to be able to provide how to reproduce this bug other than giving the core team access to the repository.

It could be around the element, but I have tried a few tricks - but I can't seem to fix the issue under Vue 3.3.9 sadly.

What is expected?

No breaking changes to interactivity when upgrading to Vue 3.3.9.

What is actually happening?

Interactivity, e.g., point events, should not be disable for layered z-indexed elements.

System Info

System:
    OS: macOS 12.6.8
    CPU: (8) arm64 Apple M1 Pro
    Memory: 132.61 MB / 32.00 GB
    Shell: 5.8.1 - /bin/zsh
  Binaries:
    Node: 20.9.0 - ~/Library/pnpm/node
    Yarn: 1.22.18 - /usr/local/bin/yarn
    npm: 10.1.0 - ~/Library/pnpm/npm
  Browsers:
    Chrome: 119.0.6045.159
    Firefox: 98.0.2
    Firefox Developer Edition: 116.0
    Safari: 15.6.1

Any additional comments?

Any help or guidance I can provide can and will be given, apologies that I can not give conclusive reasons or replication steps as to what I think is going wrong. All I can narrow down is that since upgrading to Vue 3.3.9 in the latest commit, interactivity of some elements is no longer there.

I think I have the root cause, the one main difference is that both the inert attribute and the aria-hidden=true is sticking on the id=app element ... having inert on the root div will cause all point events to be broken ...

With Vue 3.3.9:

With Vue 3.3.8:

I'm wondering it could be because I am using @vueuse/integrations/useFocusTrap as I can't see any changes in Vue 3.3.9 that cause these two attributes to be added to root node. cc @antfu

Is your app server-rendered? From the commits in 3.3.9 the only ones that look possibly related are the hydration fixes.

In particular this one: https://github.com/vuejs/core/commit/364f319d214226770d97c98d8fcada80c9e8dde3

FYI: that repo doesn't seem to be public, so we can't check it out.

But these attributes are certainly added by the focus-trap, though.

@yyx990803 No, not using any form of SSR. Vite standard build.

@LinusBorg Sure, I’m happy to give access to that repo to whoever has the time to look. Just ping me here and I can add.

RE: focus trap. I think it would be naive to say that it is wholly and solely a useFocusTrap or focus-trap issue, as this wasn’t happening pre Vue 3.3.9. I also wouldn’t say the blame lies in Vue 3.3.9, it might be a combination of the recent changes and these libraries exposes an underlying bug. I’m just not sure.

I'd be willing to look at the repo, provided that you can give a short step-by-step instrunction of how to reproduce the problem within the repo.

I think it would be naive to say that it is wholly and solely a useFocusTrap or focus-trap issue

Agreed, and I never said anything close to that. All I said was that these attributes originate from the focus-trap - as it uses those to actually trap the focus.

@LinusBorg I'll look to get you access today, and some replication steps.

@LinusBorg I have tried to replicate this bug here: https://stackblitz.com/edit/vitejs-vite-sfkbvh but to no luck.

The issue likely lies with my implementation of <UseFocusTrap /> ... and maybe how it is instantiated. I still find it odd however that it works with Vue 3.3.8 but not on Vue > 3.3.9 🤔

@LinusBorg I have changed the repository where this is to public: the corresponding PR for replication is found here: https://github.com/observerly/observerly/pull/1032

I have removed all usage of the focus-trap functionality ...

that link is still a 404 for me (not public)

@LinusBorg You may have to accept an invite to the repo …

Sure, I would - I haven't received an invite, though. And your last comment sounded like it should be public now.

Invite has been sent. Probably best to double check your email.

@LinusBorg I've been tracking down the issue for some time, and have replicated it -> this is not a Vue issue 🎊

This is an effective change from @headlessui/vue version 1.7.12+ for dialog elements (reference: https://github.com/tailwindlabs/headlessui/issues/2531).