Skip to content

[Due for payment 2025-04-28] Follow up: remove shouldDelayFocus prop #54759

Description

@hannojg

In our TextInput component instead of using the autoFocus prop we manually call textInputRef.focus():

// AutoFocus which only works on mount:
useEffect(() => {
// We are manually managing focus to prevent this issue: https://github.com/Expensify/App/issues/4514
if (!autoFocus || !input.current) {
return;
}
if (shouldDelayFocus) {
const focusTimeout = setTimeout(() => input.current?.focus(), CONST.ANIMATED_TRANSITION);
return () => clearTimeout(focusTimeout);
}
input.current.focus();
// We only want this to run on mount
// eslint-disable-next-line react-compiler/react-compiler, react-hooks/exhaustive-deps
}, []);

On mobile we primarily did this to workaround certain bugs. Most of these bugs have been resolved by now since we switched to using the new arch and used native-stack for navigation.

In fact, in this PR we removed the manual .focus() call and instead rely on the autoFocus prop and we haven't seen any issues so far:

However, we've kept the shouldDelayFocus prop for now and still manually call focus if shouldDelayFocus is true.
This ticket is a follow up to remove shouldDelayFocus.

This also brings the UX improvement that the keyboard will open promptly. See this recording on iOS where shouldDelayFocus was removed and only autoFocus={true} is set:

Before After (✨ Faster ✨)
ios_before.MP4
ios_after.MP4

There are a few considerations for removing this prop:

1) On android there is a bug with the search router where the input won't get focused if we only rely on autoFocus={true}. On iOS it's working. We need to investigate what native part is broken to make this work on android as well:

android_bug.mp4

2) The prop seems to be used to also help with smoothing the label animations for inputs, we might need to fine tune this as well (to make the animation smooth even when there is no delay)

3) We might want to see if this can be removed on web as well

Note: This would fix the following issues:

Issue OwnerCurrent Issue Owner: @trjExpensify

Metadata

Metadata

Labels

Awaiting PaymentAuto-added when associated PR is deployed to productionDailyKSv2NewFeatureSomething to build that is a new item.

Type

No type
No fields configured for issues without a type.

Projects

Status
Done

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions