Dialog focus question

[kelvinz]

From the docs, it is mentioned that by default the dialog component will focus on the first focusable element within it once it's opened.

But in the first example of the doc, https://headlessui.dev/vue/dialog, when you open the dialog, it doesn't focus on the only button in the dialog, where did the focus go to? And when you tab in, it gets locked to the only button in the example.

That's my desired behavior. But when I tried implementing it in my project, my focus goes straight to the buttons once the dialog is opened. This makes it visually weird when I'm not accessing it via keyboard.