Closing modal causes abrupt scrolling to last focused element

[shareefhadid]

Environment

---

• Operating System: Darwin
• Node Version: v22.13.0
• Nuxt Version: 3.15.4
• CLI Version: 3.21.1
• Nitro Version: 2.10.4
• Package Manager: [email protected]
• Builder: -
• User Config: compatibilityDate, devtools, runtimeConfig, nitro, sitemap, linkChecker, modules, supabase, image, routeRules, feed, robots, schemaOrg
• Runtime Modules: @nuxt/[email protected], @nuxtjs/[email protected], @vueuse/[email protected], @nuxt/[email protected], @nuxthub/[email protected], @nuxtjs/[email protected], [email protected], @nuxtjs/[email protected], [email protected], [email protected]
• Build Modules: -

---

Is this bug related to Nuxt or Vue?

Nuxt

Version

v3.0.0-alpha.12

Reproduction

Sorry for not providing a reproduction, but here it is on your doc website:

test-2.mov

In the screen capture you can see:

1. I click a button, grant it focus
2. scroll up
3. open the search modal with command palette using meta + k
4. close the modal
5. I am immediately scrolled to the last focused element

Description

As shown in the screen cap in the reproduction section, closing the modal returns focus to the last focused element causing you to scroll to its position.

I realize this is an accessibility feature, but being abruptly scrolled down is confusing and jarring for users.

Additional context

No response

Logs

[benjamincanac]

@zernonia Would you know how to disable this behavior?

[shareefhadid]

FYI, this is what I ended up doing:

import { GMSearchPalette } from "#components";

const modal = useModal();

const openSearch = () => {
  document.activeElement instanceof HTMLElement &&
    document.activeElement.blur();
  modal.open(GMSearchPalette);
};

defineShortcuts({
  meta_k: () => {
    openSearch();
  },
});

[zernonia]

@zernonia Would you know how to disable this behavior?

This behavior can be prevented by preventing the closeAutoFocus

<DialogContent @closeAutoFocus="(event) => {
  if(openWithShortcut) {
    event.preventDefault() // prevent auto focus when modal close
  }
}">