Android build v1.1.10

src/input.tsx

@@ -312,10 +312,17 @@ function focusControl(element: HTMLElement) {
   element.scrollIntoView({ block: 'nearest', inline: 'nearest' })
 }
 
-function currentFocusableControl(candidates = focusableElements()) {
+function currentFocusableControl(candidates = focusableElements(), preferControllerFocus = false) {
+  if (
+    preferControllerFocus
+    && lastControllerFocus
+    && candidates.includes(lastControllerFocus)
+    && isVisible(lastControllerFocus)
+  ) {
+    return lastControllerFocus
+  }
   const active = document.activeElement
   if (active instanceof HTMLElement && candidates.includes(active)) {
-    rememberFocusableControl(active)
     return active
   }
   if (lastControllerFocus && candidates.includes(lastControllerFocus) && isVisible(lastControllerFocus)) {
@@ -347,10 +354,10 @@ export function focusFirstControl() {
   return first
 }
 
-function moveFocus(action: InputAction) {
+function moveFocus(action: InputAction, preferControllerFocus = false) {
   const candidates = focusableElements()
   if (candidates.length === 0) return
-  const current = currentFocusableControl(candidates)
+  const current = currentFocusableControl(candidates, preferControllerFocus)
   if (!current) {
     focusFirstControl()
     return
@@ -415,6 +422,18 @@ function hasUiOverlay() {
   ).some(isVisible)
 }
 
+function hasDedicatedGameNavigation() {
+  return Array.from(
+    document.querySelectorAll<HTMLElement>('[data-game-nav-active="true"]'),
+  ).some(isVisible)
+}
+
+function dispatchGameAction(action: InputAction, device: InputDevice) {
+  window.dispatchEvent(new CustomEvent(GAME_ACTION_EVENT, {
+    detail: { action, device },
+  }))
+}
+
 const BUTTON_LABELS: Record<number, string> = {
   0: 'A / Cross',
   1: 'B / Circle',
@@ -585,10 +604,17 @@ export function InputProvider({ children }: { children: ReactNode }) {
   const dispatchAction = useCallback((action: InputAction, device: InputDevice) => {
     const uiOverlay = hasUiOverlay()
     const combatActive = Boolean(document.querySelector('[data-combat-active="true"]'))
+    const controllerUiInput = device === 'controller' && (uiOverlay || !combatActive)
+    const dedicatedNavAction = action.startsWith('navigate') || action === 'confirm' || action === 'back'
 
     setLastDevice(device)
     document.documentElement.dataset.inputDevice = device
 
+    if (controllerUiInput && dedicatedNavAction && hasDedicatedGameNavigation()) {
+      dispatchGameAction(action, device)
+      return
+    }
+
     if (action === 'toggleTouchLock') {
       setPreferences((current) => ({
         ...current,
@@ -602,22 +628,24 @@ export function InputProvider({ children }: { children: ReactNode }) {
       }, 1400)
     } else if (action.startsWith('navigate')) {
       if (uiOverlay || !combatActive) {
-        const active = currentFocusableControl()
+        const active = currentFocusableControl(focusableElements(), controllerUiInput)
         if (
           active instanceof HTMLSelectElement
           && (action === 'navigateUp' || action === 'navigateDown')
           && changeSelectOption(active, action === 'navigateUp' ? -1 : 1)
         ) {
+          if (controllerUiInput) focusControl(active)
           return
         }
-        moveFocus(action)
+        moveFocus(action, controllerUiInput)
       }
     } else if (action === 'confirm') {
-      const active = currentFocusableControl()
+      const active = currentFocusableControl(focusableElements(), controllerUiInput)
       if (isTextInput(active)) {
         setKeyboardInput(active)
         window.requestAnimationFrame(() => focusFirstControl())
       } else if (active instanceof HTMLSelectElement) {
+        if (controllerUiInput) focusControl(active)
         const select = active as HTMLSelectElement & { showPicker?: () => void }
         if (select.showPicker) select.showPicker()
         else active.click()
@@ -626,6 +654,7 @@ export function InputProvider({ children }: { children: ReactNode }) {
         && active.matches('button:not(:disabled), [role="button"]')
         && isVisible(active)
       ) {
+        if (controllerUiInput) focusControl(active)
         active.click()
       } else {
         focusFirstControl()
@@ -641,9 +670,7 @@ export function InputProvider({ children }: { children: ReactNode }) {
       }
     }
 
-    window.dispatchEvent(new CustomEvent(GAME_ACTION_EVENT, {
-      detail: { action, device },
-    }))
+    dispatchGameAction(action, device)
   }, [closeKeyboard])
 
   const dispatchControllerToken = useCallback((token: string, repeat = false) => {
@@ -743,6 +770,7 @@ export function InputProvider({ children }: { children: ReactNode }) {
       const target = event.target
       if (!(target instanceof HTMLElement)) return
       if (!target.matches(FOCUSABLE_SELECTOR) || !isVisible(target)) return
+      if (document.documentElement.dataset.inputDevice !== 'controller') return
       rememberFocusableControl(target)
     }
     const onPointerDown = (event: PointerEvent) => {
@@ -753,7 +781,7 @@ export function InputProvider({ children }: { children: ReactNode }) {
       if (!(target instanceof Element)) return
       const control = target.closest<HTMLElement>(FOCUSABLE_SELECTOR)
       if (!control || !isVisible(control)) return
-      rememberFocusableControl(control)
+      if (event.pointerType !== 'touch') rememberFocusableControl(control)
     }
     document.addEventListener('focusin', onFocusIn)
     document.addEventListener('pointerdown', onPointerDown, { capture: true })
@@ -1042,7 +1070,5 @@ export function dispatchExternalGameAction(
   action: InputAction,
   device: InputDevice,
 ) {
-  window.dispatchEvent(new CustomEvent(GAME_ACTION_EVENT, {
-    detail: { action, device },
-  }))
+  dispatchGameAction(action, device)
 }