Android - Search - Text in search input, bounces with every letter added to the search.

[IuliiaHerets]

If you haven’t already, check out our contributing guidelines for onboarding and email [email protected] to request to join our Slack channel!

---

Version Number: 9.0.95-0
Reproducible in staging?: Yes
Reproducible in production?: Yes
If this was caught on HybridApp, is this reproducible on New Expensify Standalone?: Yes, reproducible on both
Email or phone of affected tester (no customers): [email protected]
Issue reported by: Applause Internal Team
Device used: Motorola MotoG60 - Android 12
App Component: Search

Action Performed:

1. Open the Expensify app.
2. Open any chat with content in it.
3. Tap on the search icon on the top right corner.
4. Tap on "Search in this chat"
5. Start typing on the search input until the text doesn´t fit the input and the first part of the content disappears.
6. With every letter added, check the behaviour of all the text added to the input.

Expected Result:

Content in search input shouldn´t move when adding more text and the green loader is displayed.

Actual Result:

Text in search input bounces everytime the user adds a letter and the loader appears.

Workaround:

Unknown

Platforms:

• Android: Standalone
• Android: HybridApp
• Android: mWeb Chrome
• iOS: Standalone
• iOS: HybridApp
• iOS: mWeb Safari
• MacOS: Chrome / Safari
• MacOS: Desktop

Screenshots/Videos

Bug6735812_1738894933713.Bounce.mp4

View all open jobs on GitHub

[melvin-bot]

Triggered auto assignment to @zanyrenney (Bug), see https://stackoverflow.com/c/expensify/questions/14418 for more details. Please add this bug to a GH project, as outlined in the SO.

[drminh2807]

Proposal

Please re-state the problem that we are trying to solve in this issue.

Android - Search - Text in search input, bounces with every letter added to the search.

What is the root cause of that problem?

BaseTextInput use isLoading conditional to show/hide ActivityIndicator. it makes TextInput rerender every user typing with long text

App/src/components/TextInput/BaseTextInput/index.native.tsx

Lines 402 to 408 in 33a03bf

	{!!inputProps.isLoading && (
	<ActivityIndicator
	size="small"
	color={theme.iconSuccessFill}
	style={[styles.mt4, styles.ml1, loadingSpinnerStyle]}
	/>
	)}

What changes do you think we should make in order to solve the problem?

use animating prop instead. And add more prop canShowLoading to check show/hide ActivityIndicator
Option 1:

                            {inputProps.isLoading !== undefined && (
                                <ActivityIndicator
                                    size="small"
                                    animating={!!inputProps.isLoading}
                                    color={theme.iconSuccessFill}
                                    style={[styles.mt4, styles.ml1, loadingSpinnerStyle]}
                                />
                            )}

Option 2:

                            {!!inputProps.canShowLoading && (
                                <ActivityIndicator
                                    size="small"
                                    animating={!!inputProps.isLoading}
                                    color={theme.iconSuccessFill}
                                    style={[styles.mt4, styles.ml1, loadingSpinnerStyle]}
                                />
                            )}

What specific scenarios should we cover in automated tests to prevent reintroducing this issue in the future?

N/A

What alternative solutions did you explore? (Optional)

N/A

[thelullabyy]

Proposal

Please re-state the problem that we are trying to solve in this issue.

• Text in search input bounces everytime the user adds a letter and the loader appears.

What is the root cause of that problem?

• We only display the loading indicator when isLoading is true. However, when the text input is too long and isLoading is true, the search input shifts to the left. Then, if isLoading remains true, it moves to the right, as described in the original post:

App/src/components/TextInput/BaseTextInput/index.native.tsx

Lines 402 to 408 in 33a03bf

	{!!inputProps.isLoading && (
	<ActivityIndicator
	size="small"
	color={theme.iconSuccessFill}
	style={[styles.mt4, styles.ml1, loadingSpinnerStyle]}
	/>
	)}

What changes do you think we should make in order to solve the problem?

• We should reserve space for the loading indicator, even when it's not visible. This ensures that the search input remains stationary throughout the session:

                            {inputProps.isLoading !== undefined && (
                                <ActivityIndicator
                                    size="small"
                                    color={theme.iconSuccessFill}
                                    style={[styles.mt4, styles.ml1, loadingSpinnerStyle, {opacity: inputProps.isLoading ? 1 : 0}]}
                                />
                            )}

• We should apply the same fix to web version as well.

• Note: The animating prop does not work properly in Android device. There is the bug, where the indicator stays hidden if initialized as animating={false}.

What specific scenarios should we cover in automated tests to prevent reintroducing this issue in the future?

• This is UI issue, no need test.

What alternative solutions did you explore? (Optional)

• We can use:

                            {inputProps.isLoading !== undefined && (
                                <ActivityIndicator
                                    size="small"
                                    animating={inputProps.isLoading}
                                    key={String(inputProps.isLoading)}
                                    color={theme.iconSuccessFill}
                                    style={[styles.mt4, styles.ml1, loadingSpinnerStyle]}
                                />
                            )}

or

                            <View style={[{flexDirection: 'row', justifyContent: 'center', alignItems: 'center'}, props.isLoading !== undefined && {width: 20}]}>
                                {!!inputProps.isLoading && (
                                    <ActivityIndicator
                                        size="small"
                                        color={theme.iconSuccessFill}
                                        style={[styles.mt4, styles.ml1, loadingSpinnerStyle]}
                                    />
                                )}
                            </View>

[melvin-bot]

@zanyrenney Uh oh! This issue is overdue by 2 days. Don't forget to update your issues!