From b87d488ccb4f224168895533bacb346670d06a41 Mon Sep 17 00:00:00 2001 From: Sjaak Schilperoort Date: Thu, 18 Dec 2025 08:17:45 +0100 Subject: [PATCH 1/3] Fix autoFocus on InputField --- package.json | 2 +- src/components/InputField.tsx | 12 +++++++++++- .../__tests__/__snapshots__/InputField.test.tsx.snap | 9 +++++++++ 3 files changed, 21 insertions(+), 2 deletions(-) diff --git a/package.json b/package.json index 06a8504..28b9915 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@observation.org/react-native-components", - "version": "1.62.0", + "version": "1.63.0", "main": "src/index.ts", "repository": "git@github.com:observation/react-native-components.git", "author": "Observation.org", diff --git a/src/components/InputField.tsx b/src/components/InputField.tsx index 8195c55..27c5022 100644 --- a/src/components/InputField.tsx +++ b/src/components/InputField.tsx @@ -1,4 +1,4 @@ -import React, { RefAttributes, useState } from 'react' +import React, { RefAttributes, useRef, useState } from 'react' import { Platform, StyleProp, StyleSheet, Text, TextInput, TextInputProps, View, ViewStyle } from 'react-native' import { Icon } from './Icon' @@ -33,6 +33,8 @@ const InputField = ({ disabled = false, }: Props) => { const [isFocused, setIsFocused] = useState(false) + const inputRef = useRef(null) + const didAutoFocus = useRef(false) // Set lineHeight to 0 to fix vertical alignment of the input text on iOS // Do this only for iOS, as setting it to 0 on Android results in input text being invisible @@ -58,6 +60,14 @@ const InputField = ({ autoCapitalize="none" onFocus={() => setIsFocused(true)} onBlur={() => setIsFocused(false)} + onLayout={() => { + if (inputProps?.autoFocus && !didAutoFocus.current) { + requestAnimationFrame(() => { + inputRef.current?.focus() + didAutoFocus.current = true + }) + } + }} underlineColorAndroid="transparent" placeholderTextColor={placeholderTextColor} /> diff --git a/src/components/__tests__/__snapshots__/InputField.test.tsx.snap b/src/components/__tests__/__snapshots__/InputField.test.tsx.snap index 10d7dd5..13eda96 100644 --- a/src/components/__tests__/__snapshots__/InputField.test.tsx.snap +++ b/src/components/__tests__/__snapshots__/InputField.test.tsx.snap @@ -40,6 +40,7 @@ exports[`InputField Rendering Disabled 1`] = ` autoCapitalize="none" onBlur={[Function]} onFocus={[Function]} + onLayout={[Function]} placeholderTextColor="#E6E6E6" style={ [ @@ -95,6 +96,7 @@ exports[`InputField Rendering Normal 1`] = ` autoCapitalize="none" onBlur={[Function]} onFocus={[Function]} + onLayout={[Function]} placeholderTextColor="#939393" style={ [ @@ -150,6 +152,7 @@ exports[`InputField Rendering With a description 1`] = ` autoCapitalize="none" onBlur={[Function]} onFocus={[Function]} + onLayout={[Function]} placeholderTextColor="#939393" style={ [ @@ -242,6 +245,7 @@ exports[`InputField Rendering With a label 1`] = ` autoCapitalize="none" onBlur={[Function]} onFocus={[Function]} + onLayout={[Function]} placeholderTextColor="#939393" style={ [ @@ -297,6 +301,7 @@ exports[`InputField Rendering With a right icon 1`] = ` autoCapitalize="none" onBlur={[Function]} onFocus={[Function]} + onLayout={[Function]} placeholderTextColor="#939393" style={ [ @@ -370,6 +375,7 @@ exports[`InputField Rendering With an error message 1`] = ` autoCapitalize="none" onBlur={[Function]} onFocus={[Function]} + onLayout={[Function]} placeholderTextColor="#939393" style={ [ @@ -478,6 +484,7 @@ exports[`InputField Rendering With focus 1`] = ` autoCapitalize="none" onBlur={[Function]} onFocus={[Function]} + onLayout={[Function]} placeholderTextColor="#939393" style={ [ @@ -534,6 +541,7 @@ exports[`InputField Rendering With focus and an error message 1`] = ` autoCapitalize="none" onBlur={[Function]} onFocus={[Function]} + onLayout={[Function]} placeholderTextColor="#939393" style={ [ @@ -590,6 +598,7 @@ exports[`InputField Rendering Without focus 1`] = ` autoCapitalize="none" onBlur={[Function]} onFocus={[Function]} + onLayout={[Function]} placeholderTextColor="#939393" style={ [ From a9ae5887aa9765cfd984d3a6c16b632bf7275b07 Mon Sep 17 00:00:00 2001 From: Sjaak Schilperoort Date: Thu, 18 Dec 2025 11:13:34 +0100 Subject: [PATCH 2/3] Set input field reference --- src/components/InputField.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/src/components/InputField.tsx b/src/components/InputField.tsx index 27c5022..7afd341 100644 --- a/src/components/InputField.tsx +++ b/src/components/InputField.tsx @@ -55,6 +55,7 @@ const InputField = ({ )} Date: Thu, 18 Dec 2025 12:54:19 +0100 Subject: [PATCH 3/3] Only pass onLayout when autoFocus is true --- src/components/InputField.tsx | 22 ++++++++++++------- .../__snapshots__/InputField.test.tsx.snap | 9 -------- 2 files changed, 14 insertions(+), 17 deletions(-) diff --git a/src/components/InputField.tsx b/src/components/InputField.tsx index 7afd341..4ef3b22 100644 --- a/src/components/InputField.tsx +++ b/src/components/InputField.tsx @@ -46,6 +46,19 @@ const InputField = ({ const inputContainerStyle = disabled ? { backgroundColor: theme.color.greyLight } : {} const placeholderTextColor = disabled ? theme.color.greySemi : theme.color.placeholder + const layoutHandler = inputProps?.autoFocus + ? () => { + if (didAutoFocus.current) { + return + } + + requestAnimationFrame(() => { + inputRef.current?.focus() + didAutoFocus.current = true + }) + } + : undefined + return ( {label && ( @@ -61,14 +74,7 @@ const InputField = ({ autoCapitalize="none" onFocus={() => setIsFocused(true)} onBlur={() => setIsFocused(false)} - onLayout={() => { - if (inputProps?.autoFocus && !didAutoFocus.current) { - requestAnimationFrame(() => { - inputRef.current?.focus() - didAutoFocus.current = true - }) - } - }} + onLayout={layoutHandler} underlineColorAndroid="transparent" placeholderTextColor={placeholderTextColor} /> diff --git a/src/components/__tests__/__snapshots__/InputField.test.tsx.snap b/src/components/__tests__/__snapshots__/InputField.test.tsx.snap index 13eda96..10d7dd5 100644 --- a/src/components/__tests__/__snapshots__/InputField.test.tsx.snap +++ b/src/components/__tests__/__snapshots__/InputField.test.tsx.snap @@ -40,7 +40,6 @@ exports[`InputField Rendering Disabled 1`] = ` autoCapitalize="none" onBlur={[Function]} onFocus={[Function]} - onLayout={[Function]} placeholderTextColor="#E6E6E6" style={ [ @@ -96,7 +95,6 @@ exports[`InputField Rendering Normal 1`] = ` autoCapitalize="none" onBlur={[Function]} onFocus={[Function]} - onLayout={[Function]} placeholderTextColor="#939393" style={ [ @@ -152,7 +150,6 @@ exports[`InputField Rendering With a description 1`] = ` autoCapitalize="none" onBlur={[Function]} onFocus={[Function]} - onLayout={[Function]} placeholderTextColor="#939393" style={ [ @@ -245,7 +242,6 @@ exports[`InputField Rendering With a label 1`] = ` autoCapitalize="none" onBlur={[Function]} onFocus={[Function]} - onLayout={[Function]} placeholderTextColor="#939393" style={ [ @@ -301,7 +297,6 @@ exports[`InputField Rendering With a right icon 1`] = ` autoCapitalize="none" onBlur={[Function]} onFocus={[Function]} - onLayout={[Function]} placeholderTextColor="#939393" style={ [ @@ -375,7 +370,6 @@ exports[`InputField Rendering With an error message 1`] = ` autoCapitalize="none" onBlur={[Function]} onFocus={[Function]} - onLayout={[Function]} placeholderTextColor="#939393" style={ [ @@ -484,7 +478,6 @@ exports[`InputField Rendering With focus 1`] = ` autoCapitalize="none" onBlur={[Function]} onFocus={[Function]} - onLayout={[Function]} placeholderTextColor="#939393" style={ [ @@ -541,7 +534,6 @@ exports[`InputField Rendering With focus and an error message 1`] = ` autoCapitalize="none" onBlur={[Function]} onFocus={[Function]} - onLayout={[Function]} placeholderTextColor="#939393" style={ [ @@ -598,7 +590,6 @@ exports[`InputField Rendering Without focus 1`] = ` autoCapitalize="none" onBlur={[Function]} onFocus={[Function]} - onLayout={[Function]} placeholderTextColor="#939393" style={ [