diff --git a/src/components/forms/TextField.tsx b/src/components/forms/TextField.tsx index ebf2e47506..3b6a8e879c 100644 --- a/src/components/forms/TextField.tsx +++ b/src/components/forms/TextField.tsx @@ -5,13 +5,15 @@ import { TextInputProps, TextStyle, ViewStyle, + Pressable, StyleSheet, AccessibilityProps, } from 'react-native' import {HITSLOP_20} from 'lib/constants' -import {useTheme, atoms as a, web, tokens, android} from '#/alf' -import {Text} from '#/components/Typography' +import {isWeb} from '#/platform/detection' +import {useTheme, atoms as a, web, tokens, android, flatten} from '#/alf' +import {Text, leading} from '#/components/Typography' import {useInteractionState} from '#/components/hooks/useInteractionState' import {Props as SVGIconProps} from '#/components/icons/common' @@ -39,6 +41,7 @@ export type RootProps = React.PropsWithChildren<{isInvalid?: boolean}> export function Root({children, isInvalid = false}: RootProps) { const inputRef = React.useRef(null) + const rootRef = React.useRef(null) const { state: hovered, onIn: onHoverIn, @@ -69,17 +72,35 @@ export function Root({children, isInvalid = false}: RootProps) { ], ) + React.useLayoutEffect(() => { + const root = rootRef.current + if (!root || !isWeb) return + // @ts-ignore web only + root.tabIndex = -1 + }, []) + return ( - inputRef.current?.focus(), - onMouseOver: onHoverIn, - onMouseOut: onHoverOut, - })}> + inputRef.current?.focus()} + onHoverIn={onHoverIn} + onHoverOut={onHoverOut}> {children} - + ) } @@ -166,6 +187,7 @@ export function createInput(Component: typeof TextInput) { @@ -294,6 +316,7 @@ export function Suffix({ const ctx = React.useContext(Context) return (