diff --git a/components/LoginModal.tsx b/components/LoginModal.tsx index fed6838..4802b2f 100644 --- a/components/LoginModal.tsx +++ b/components/LoginModal.tsx @@ -1,5 +1,5 @@ import React, { useState, useRef, useEffect } from "react"; -import { Modal, View, TextInput, StyleSheet, ActivityIndicator, useTVEventHandler } from "react-native"; +import { Modal, View, TextInput, StyleSheet, ActivityIndicator } from "react-native"; import { usePathname } from "expo-router"; import Toast from "react-native-toast-message"; import useAuthStore from "@/stores/authStore"; @@ -19,47 +19,24 @@ const LoginModal = () => { const [isLoading, setIsLoading] = useState(false); const usernameInputRef = useRef(null); const passwordInputRef = useRef(null); - const loginButtonRef = useRef(null); - const [focused, setFocused] = useState("username"); const pathname = usePathname(); const isSettingsPage = pathname.includes("settings"); - const tvEventHandler = (evt: any) => { - if (!evt || !isLoginModalVisible || isSettingsPage) { - return; - } - - const isUsernameVisible = serverConfig?.StorageType !== "localstorage"; - - if (evt.eventType === "down") { - if (focused === "username" && isUsernameVisible) { - passwordInputRef.current?.focus(); - } else if (focused === "password") { - loginButtonRef.current?.focus(); - } - } - - if (evt.eventType === "up") { - if (focused === "button") { - passwordInputRef.current?.focus(); - } else if (focused === "password" && isUsernameVisible) { - usernameInputRef.current?.focus(); - } - } - }; - - useTVEventHandler(tvEventHandler); - + // Focus management with better TV remote handling useEffect(() => { if (isLoginModalVisible && !isSettingsPage) { const isUsernameVisible = serverConfig?.StorageType !== "localstorage"; - setTimeout(() => { + + // Use a small delay to ensure the modal is fully rendered + const focusTimeout = setTimeout(() => { if (isUsernameVisible) { usernameInputRef.current?.focus(); } else { passwordInputRef.current?.focus(); } - }, 200); + }, 100); + + return () => clearTimeout(focusTimeout); } }, [isLoginModalVisible, serverConfig, isSettingsPage]); @@ -85,6 +62,11 @@ const LoginModal = () => { } }; + // Handle navigation between inputs using returnKeyType + const handleUsernameSubmit = () => { + passwordInputRef.current?.focus(); + }; + return ( { value={username} onChangeText={setUsername} returnKeyType="next" - onFocus={() => setFocused("username")} + onSubmitEditing={handleUsernameSubmit} + blurOnSubmit={false} /> )} { value={password} onChangeText={setPassword} returnKeyType="go" - onFocus={() => setFocused("password")} onSubmitEditing={handleLogin} /> setFocused("button")} text={isLoading ? "" : "登录"} onPress={handleLogin} disabled={isLoading} style={styles.button} + hasTVPreferredFocus={!serverConfig || serverConfig.StorageType === "localstorage"} > {isLoading && }