diff --git a/app/(auth)/tv-season-select-modal.tsx b/app/(auth)/tv-season-select-modal.tsx index 3667d823..02aadf22 100644 --- a/app/(auth)/tv-season-select-modal.tsx +++ b/app/(auth)/tv-season-select-modal.tsx @@ -257,14 +257,15 @@ export default function TVSeasonSelectModalPage() { }; if (modalState.hasAdvancedRequestPermission) { - // Close this modal and open the advanced request modal - router.back(); + // Replace this sheet with the advanced request modal so it takes our + // place in the stack instead of stacking on top (which breaks focus). showRequestModal({ requestBody: body, title: modalState.title, id: modalState.mediaId, mediaType: MediaType.TV, onRequested: modalState.onRequested, + replace: true, }); return; } diff --git a/hooks/useTVRequestModal.ts b/hooks/useTVRequestModal.ts index 0c096bb4..bcae9678 100644 --- a/hooks/useTVRequestModal.ts +++ b/hooks/useTVRequestModal.ts @@ -11,6 +11,12 @@ interface ShowRequestModalParams { id: number; mediaType: MediaType; onRequested: () => void; + /** + * Replace the current route instead of pushing. Use when opening the request + * modal from another modal (e.g. the season selector) so the new sheet takes + * its place rather than stacking on top of it (which breaks TV focus). + */ + replace?: boolean; } export const useTVRequestModal = () => { @@ -25,7 +31,11 @@ export const useTVRequestModal = () => { mediaType: params.mediaType, onRequested: params.onRequested, }); - router.push("/(auth)/tv-request-modal"); + if (params.replace) { + router.replace("/(auth)/tv-request-modal"); + } else { + router.push("/(auth)/tv-request-modal"); + } }, [router], );