[Dialog]: tabbed focus differences inside and outside of dialog

[smacpherson64]

👋 Hey there!

I am having an odd issue with differences in tabbing inputs inside and outside of a Dialog. (@headlessui/react)

Outside of the Dialog when the text input becomes focused from tabbing, the browser selects the entire text.

Inside of the Dialog when the text input becomes focused from tabbing, the browser does not select the text.

Here is an example:
https://codesandbox.io/s/issue-headlessui-modal-focus-issue-3n1e9?file=/src/App.js

From what I can see, I believe the focus is triggered here:

headlessui/packages/@headlessui-vue/src/utils/focus-management.ts

Lines 94 to 96 in 8e7478d

	export function focusElement(element: HTMLElement | null) {
	element?.focus({ preventScroll: true })
	}

My thought for approaching a fix would be to set text based input elements in this function to also fire: element?.select(). (https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/select)

Thoughts?

Thanks for your time!