[6.x] Improve focus on page load

resources/js/components/ui/Listing/Search.vue

@@ -17,7 +17,7 @@ defineExpose({ focus });
     <div class="flex-1 max-w-sm" :class="{ 'max-w-60!': activeFilterBadgeCount > 2 }">
         <label for="listings-search" class="sr-only">{{ __('Search entries') }}</label>
         <Input
-            autofocus
+            :focus="true"
             ref="input"
             icon="magnifying-glass"
             id="listings-search"

resources/js/pages/layout/Layout.vue

@@ -5,7 +5,8 @@ import { ConfigProvider } from 'reka-ui';
 import SessionExpiry from '@/components/SessionExpiry.vue';
 import LicensingAlert from '@/components/LicensingAlert.vue';
 import PortalTargets from '@/components/portals/PortalTargets.vue';
-import { provide, watch, ref } from 'vue';
+import { provide, watch, ref, onMounted, onUnmounted, nextTick } from 'vue';
+import { router } from '@inertiajs/vue3';
 import useBodyClasses from './body-classes.js';
 import useStatamicPageProps from '@/composables/page-props.js';
 
@@ -21,6 +22,45 @@ watch(() => props.additionalBreadcrumbs, (newVal) => additionalBreadcrumbs.value
 provide('layout', {
     additionalBreadcrumbs,
 });
+
+// Focus management: if no Input with :focus="true" is present, focus the main element
+let navigationListener = null;
+
+function checkAndFocusMain() {
+    // Wait for all components to mount and any auto-focus to complete
+    nextTick(() => {
+        setTimeout(() => {
+            const activeElement = document.activeElement;
+            const isInputFocused = activeElement && (
+                activeElement.matches('input, textarea, select, [contenteditable]') ||
+                activeElement.closest('[role="combobox"], [role="textbox"]')
+            );
+
+            // If no input is focused, focus the main element
+            if (!isInputFocused) {
+                const mainElement = document.querySelector('#content-card');
+                if (mainElement && typeof mainElement.focus === 'function') {
+                    mainElement.focus();
+                }
+            }
+        }, 100); // Small delay to allow any auto-focus to complete
+    });
+}
+
+onMounted(() => {
+    navigationListener = router.on('success', () => {
+        checkAndFocusMain();
+    });
+
+    // Also check on initial mount
+    checkAndFocusMain();
+});
+
+onUnmounted(() => {
+    if (navigationListener) {
+        navigationListener();
+    }
+});
 </script>
 
 <template>
@@ -32,7 +72,7 @@ provide('layout', {
         <main id="main" class="flex bg-body-bg dark:border-t dark:border-body-border rounded-t-2xl fixed top-14 inset-x-0 bottom-0 min-h-[calc(100vh-3.5rem)]">
             <Nav />
             <div id="main-content" class="main-content sm:p-2 h-full flex-1 overflow-y-auto rounded-t-2xl">
-                <div id="content-card" class="relative content-card min-h-full">
+                <div id="content-card" class="relative content-card min-h-full focus:outline-none" tabindex="-1">
                     <slot />
                 </div>
             </div>