Integrate a new property into TextInput to manage the "shortcuts" visibility on iPads

[rezkiy37]

I’m tackling an issue IOU - Empty suggestion pop-up appears below numeric keyboard, preventing number input #50057 at Expensify. Here’s a quick summary:

This issue affects the TextInput on iPads only. There is an amount input with a custom numeric keyboard on the display. When the user interacts with it a blocking view appears. We refer to it as the “suggestion pop-up” (or “shortcuts” in settings). It appears after each interaction with the input field. Although it disappears once the user taps it, the pop-up intercepts clicks on buttons, requiring users to tap twice to interact with the app.

Unfortunately, React Native doesn’t currently provide a built-in way to hide this suggestion pop-up programmatically.

However, iOS does offer a native property for UITextField called inputAssistantItem. According to the documentation, we can hide the "shortcuts" by setting the leadingBarButtonGroups and trailingBarButtonGroups properties to empty arrays.

I propose adding a new property for TextInput in React Native, which would set these native properties to empty arrays. This new property could be called disableInputAssistant or disableKeyboardShortcuts and would be a boolean.

Current behaviour

Bug.mp4

As you can see the user cannot interact with the input freely.

Changes

textField.inputAssistantItem.leadingBarButtonGroups = @[];
textField.inputAssistantItem.trailingBarButtonGroups = @[];

Native.mp4

After applying these native props the user taps on the software buttons normally. Moreover, it allows us to manage the redo & undo buttons.

[rezkiy37]

Meanwhile, I'm preparing a draft PR 🙂

[mjmasn]

Would be good to see this officially supported / fixed. We hit a similar issue and patched it in as a new assistantBarHidden prop (to match the caretHidden and contextMenuHidden props naming-wise).

[rezkiy37]

That's my PR - facebook/react-native#47671. I am working on it opening asap.

[rezkiy37]

The PR (facebook/react-native#47671) has been opened for review 🙂