IOU - Empty suggestion pop-up appears below numeric keyboard, preventing number input

[lanitochka17]

If you haven’t already, check out our contributing guidelines for onboarding and email contributors@expensify.com to request to join our Slack channel!

---

Version Number: 9.0.43 Reproducible in staging?: Y Reproducible in production?: Y If this was caught during regression testing, add the test name, ID and link from TestRail: N/A Email or phone of affected tester (no customers): applausetester+omqq1@applause.expensifail.com Issue reported by: Applause - Internal Team

Action Performed:

Precondition: user has signed in

1. Open app
2. Tap on FAB
3. Select Submit Expense
4. Try to enter value with multiple numbers e.g. "3456"

Expected Result:

The user should be able to continuously input numbers in the Amount field without any interruptions, and all taps on the numeric keyboard should be properly registered. The "Next" button should remain fully accessible

Actual Result:

The empty keyboard suggestion is displayed below the numeric keyboard and also overlaps the "Next" button. It prevents continuous input in the Amount field because tapping a number on the numeric keyboard only dismisses the empty suggestion pop-up without registering the number. The empty suggestion pop-up appears with each tap on the numeric keyboard. This issue also makes it difficult to proceed, as the empty suggestion pop-up covers the "Next" button

Workaround:

Unknown

Platforms:

Which of our officially supported platforms is this issue occurring on?

• [ ] Android: Native
• [ ] Android: mWeb Chrome
• [x] iOS: IPAD
• [ ] iOS: mWeb Safari
• [ ] MacOS: Chrome / Safari
• [ ] MacOS: Desktop

Screenshots/Videos

Add any screenshot/video evidence

https://github.com/user-attachments/assets/dbd0e4ef-066c-462a-8ca1-828d212a5808

View all open jobs on GitHub

[melvin-bot[bot]]

Triggered auto assignment to @garrettmknight (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.

[lanitochka17]

@garrettmknight FYI I haven't added the External label as I wasn't 100% sure about this issue. Please take a look and add the label if you agree it's a bug and can be handled by external contributors

[melvin-bot[bot]]

Unable to auto-create job on Upwork. The BZ team member should create it manually for this issue.

[melvin-bot[bot]]

Triggered auto assignment to Contributor-plus team member for initial proposal review - @shubham1206agra (External)

[rezkiy37]

Hi, I am Michael (Mykhailo) from Callstack, an expert agency and I can work on this issue.

[rezkiy37]

For context:

1. There was a similar issue - https://github.com/Expensify/App/issues/38349.
2. It was fixed - https://github.com/Expensify/App/pull/38728.

However, this issue describes a little bit different problem.

[rezkiy37]

Actively working on the issue.

[rezkiy37]

Discussing a proposal internally.

[melvin-bot[bot]]

@garrettmknight, @shubham1206agra Eep! 4 days overdue now. Issues have feelings too...

[garrettmknight]

@rezkiy37 is there anywhere I can follow along with the proposal in slack?

[rezkiy37]

Proposal

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

The empty keyboard suggestion is displayed below the numeric keyboard and overlaps the "Next" button. It prevents continuous input in the Amount field because tapping a number on the numeric keyboard only dismisses the empty suggestion pop-up without registering the number. The empty suggestion pop-up appears with each tap on the numeric keyboard. This issue also makes proceeding difficult, as the empty suggestion pop-up covers the "Next" button.

What is the root cause of that problem?

The empty suggestion pop-up cannot be hidden from React Native programmatically. There was a PR that helped to hide the QuickType bar, but not this particular empty bar.

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

Since this text input is controlled by the custom numeric buttons, it is not actually an input on native platforms. Moreover, the app passes tons of props and does many other work such as computing, lifecycle, and hooks. However, it is just a text for the user. So I am proposing to simplify AmountTextInput for native platforms. It should use the Text component with same styles.

function AmountTextInput(
    {style, containerStyle, formattedAmount, placeholder}: AmountTextInputProps,
    // eslint-disable-next-line @typescript-eslint/no-unused-vars
    _ref: ForwardedRef<BaseTextInputRef>,
) {
    const theme = useTheme();
    const shouldShowPlaceholder = !formattedAmount;

    return (
        <View style={containerStyle}>
            <Text style={[style, shouldShowPlaceholder && {color: theme.placeholderText}]}>{shouldShowPlaceholder ? placeholder : formattedAmount}</Text>
        </View>
    );
}

What alternative solutions did you explore? (Optional)

1. Do nothing. Because it is an edge case and replicable only after some scenario. It shows the micro suggestion bar by default. It blocks the first interaction as well.

[rezkiy37]

I've posted a proposal. cc @garrettmknight @shubham1206agra

[garrettmknight]

@shubham1206agra can you please review the proposal?

[shubham1206agra]

@rezkiy37 I believe that with your proposal, we lose access to change input via an external keyboard on native devices.

[rezkiy37]

@rezkiy37 I believe that with your proposal, we lose access to change input via an external keyboard on native devices.

Do you mean like an iPad with a keyboard? We can implement a listener or a kind of onKeyPress handler. WDYT?

useEffect(() => {
    const handleKeyDown = (event: KeyboardEvent) => {
        if (event.key >= '0' && event.key <= '9') {
            console.log(`Number key pressed: ${event.key}`);
            // Handle the number key press here
        }
    };

    // Add event listeners for keydown
    window.addEventListener('keydown', handleKeyDown);

    // Clean up event listeners on component unmount
    return () => {
        window.removeEventListener('keydown', handleKeyDown);
    };
}, []);

[rezkiy37]

No overdue, we are still discussing. @shubham1206agra FYI: https://github.com/Expensify/App/issues/50057#issuecomment-2407024657.

[melvin-bot[bot]]

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

[garrettmknight]

Not overdue - they're discussing the best solution.

[rezkiy37]

@shubham1206agra, just a friendly reminder - https://github.com/Expensify/App/issues/50057#issuecomment-2410619685.

[shubham1206agra]

I am not a fan of adding events like that here tbh. Is there any other way to do this?

[rezkiy37]

I am not a fan of adding events like that here tbh. Is there any other way to do this?

There is no other way to handle an external keyboard when we don't use TextInput. Why do you mind this approach? It is a normal solution because we use it quite often in the project.

Screenshot

[melvin-bot[bot]]

@garrettmknight @shubham1206agra this issue was created 2 weeks ago. Are we close to approving a proposal? If not, what's blocking us from getting this issue assigned? Don't hesitate to create a thread in #expensify-open-source to align faster in real time. Thanks!

[shubham1206agra]

One more thing. I can't insert the numbers in between.

[rezkiy37]

Yeah, that's true.

[rezkiy37]

I will try to find a better solution.