diff --git a/app/search/Keyboard.jsx b/app/search/Keyboard.jsx index 78b8f88..e1d0758 100644 --- a/app/search/Keyboard.jsx +++ b/app/search/Keyboard.jsx @@ -46,7 +46,7 @@ import { FocusScope, Text, View, motion, useIsFocused } from '@ps5-react/core'; _state.focused ? { backgroundColor: "#f2f2f3" } : null ], initial: false, animate: { scale: 1 }, transition: { type: "tween", duration: 0.1, ease: [0.4, 0, 0.2, 1] }, whilePress: { scale: 0.95 }, children: /* @__PURE__ */ (0, jsx)(KeyFace, { label, icon, button, url: compact }) }); }); - var Keyboard = (0, memo)(function Keyboard2({ onChange, onSubmit, url = false }) { + var Keyboard = (0, memo)(function Keyboard2({ onChange, onSubmit, url = false, focusKey }) { const t2 = useT(); const { rtl } = useLocale(); const edge = rtl ? 0 : COLUMNS2 - 1; @@ -63,7 +63,7 @@ import { FocusScope, Text, View, motion, useIsFocused } from '@ps5-react/core'; return false; return true; }; - return /* @__PURE__ */ (0, jsx)(FocusScope, { wrap: true, onAction, children: /* @__PURE__ */ (0, jsxs)(View, { style: [{ width: 564, flexDirection: "row", flexWrap: "wrap", gap: 12 }, LTR2], children: [ + return /* @__PURE__ */ (0, jsx)(FocusScope, { wrap: true, focusKey, onAction, children: /* @__PURE__ */ (0, jsxs)(View, { style: [{ width: 564, flexDirection: "row", flexWrap: "wrap", gap: 12 }, LTR2], children: [ characters.map( (character, i) => /* @__PURE__ */ (0, jsx)( Key, diff --git a/app/search/Suggestions.jsx b/app/search/Suggestions.jsx index c0dd53c..60d7d51 100644 --- a/app/search/Suggestions.jsx +++ b/app/search/Suggestions.jsx @@ -69,7 +69,7 @@ import { FocusScope, ScrollView, Text, View, useIsFocused } from '@ps5-react/cor width: CARD_WIDTH3, onPress: () => onOpenGame(game), rowEnd: index % COLUMNS3 === COLUMNS3 - 1, - rowStart: index % COLUMNS3 === 0 + rowStart: index % COLUMNS3 === 0 ? "search-keyboard" : void 0 }, game.id ) diff --git a/app/search/index.jsx b/app/search/index.jsx index 4dc21f0..bcfad55 100644 --- a/app/search/index.jsx +++ b/app/search/index.jsx @@ -39,6 +39,8 @@ import { FocusScope, ScrollView, Text, View, VirtualList, motion } from '@ps5-re }, [query]); return typed ? settled : query; } + // The first column of results and suggestions goes back to the keyboard on Left. + var TO_KEYBOARD = "search-keyboard"; function Results({ query, onOpenGame }) { const t2 = useT(); const results = searchGames(query); @@ -67,7 +69,7 @@ import { FocusScope, ScrollView, Text, View, VirtualList, motion } from '@ps5-re width: CARD_WIDTH3, onPress: () => onOpenGame(game), rowEnd: index % COLUMNS3 === COLUMNS3 - 1 || index === results.length - 1, - rowStart: index % COLUMNS3 === 0 + rowStart: index % COLUMNS3 === 0 ? TO_KEYBOARD : void 0 } ) ) @@ -112,7 +114,7 @@ import { FocusScope, ScrollView, Text, View, VirtualList, motion } from '@ps5-re return /* @__PURE__ */ (0, jsx)(FocusScope, { autoFocus: true, onBack: back2, onAction, children: /* @__PURE__ */ (0, jsxs)(View, { style: { flex: 1, flexDirection: "row", gap: 72, backgroundColor: "#000000", paddingHorizontal: 48, paddingTop: 48 }, children: [ /* @__PURE__ */ (0, jsxs)(View, { style: { gap: 36 }, children: [ /* @__PURE__ */ (0, jsx)(QueryField, { query }), - /* @__PURE__ */ (0, jsx)(Keyboard, { onChange: setQuery, onSubmit: on.submit }) + /* @__PURE__ */ (0, jsx)(Keyboard, { onChange: setQuery, onSubmit: on.submit, focusKey: TO_KEYBOARD }) ] }), /* @__PURE__ */ (0, jsx)(View, { style: { flex: 1 }, children: /* @__PURE__ */ (0, jsx)(FocusScope, { focusKey: "search-results", children: settled.trim() ? /* @__PURE__ */ (0, jsx)(Results, { query: settled, onOpenGame: on.openGame }) : /* @__PURE__ */ (0, jsx)(Suggestions, { onSearch: on.search, onOpenGame: on.openGame }) }) }) ] }) }); diff --git a/app/ui/GameCard.jsx b/app/ui/GameCard.jsx index a5b8d5c..43532c3 100644 --- a/app/ui/GameCard.jsx +++ b/app/ui/GameCard.jsx @@ -140,8 +140,9 @@ import { Text, View, motion, transitions, useIsFocused } from '@ps5-react/core'; motion.View, { ...focusEnd(rtl, rowEnd ? focusKey : void 0), - // A grid's first column: Left stops there instead of looking up the page for something to its left. - ...focusStart(rtl, rowStart ? focusKey : void 0), + // A grid's first column: Left stops there instead of looking up the page for something to its left, + // or goes where rowStart names (Search's keyboard). + ...focusStart(rtl, typeof rowStart === "string" ? rowStart : rowStart ? focusKey : void 0), ...rest2, focusKey, onPress,