[Masterclass] No way to keep the keyboard up when sending via a button - tap-to-dismiss fires on every tap outside the input

[shrutibalasawebdev]

What were you trying to do?

Building a chat composer - a <bare-text-input> and a send <pressable> in the same <row> - where sending a message keeps the field focused and the keyboard up, so the user can type the next message immediately.

What happened?

Expected: some way to keep the field focused through a programmatic send.

Any of:

• an opt-out for tap-to-dismiss (per-screen or per-element), or
• an exemption for <pressable> taps, or
• a focus API - something that takes a native:key and focuses that element.

Actual: while the input is focused, tapping anywhere outside it dismisses the keyboard, including the send button in the same row. The gesture is screen-wide, not specific to interactive elements - tapping a plain <column> with no @press dismisses it too.

keep-focus-on-submit solves this only for the return key, because return is handled inside the field and never triggers the dismiss gesture. Every other send path loses focus.

How to reproduce the bug

<column class="w-full h-full bg-theme-background">
    <row class="w-full px-3 pt-3 pb-8 gap-2 items-center bg-theme-surface">
        <bare-text-input
            native:key="message-input"
            native:model="draft"
            placeholder="Type your message..."
            class="flex-1 bg-theme-surface-variant rounded-full px-4 py-3 text-theme-on-surface" />
        <pressable @press="send" class="bg-theme-primary rounded-2xl w-[48] h-[48] items-center justify-center">
            <icon name="paperplane.fill" :size="20" class="text-theme-on-primary" />
        </pressable>
    </row>
</column>

1. Tap the input and type - the keyboard comes up.
2. Tap the send button. The keyboard dismisses.

Debug Output

   INFO  NativePHP Mobile.  

+--------------------+----------+
| Package Version    | dev-main |
| PHP Version (Host) | 8.4.18   |
| OS                 | Darwin   |
| OS Version         | 25.5.0   |
| Embedded PHP       | 8.4.24   |
+--------------------+----------+

   INFO  Installed Plugins.  

+---------------------------------+----------+
| Package                         | Version  |
+---------------------------------+----------+
| nativephp/mobile-secure-storage | 1.0.2    |
| nativephp/mobile-ui             | dev-main |
+---------------------------------+----------+

   INFO  Development Tools.  

+----------------+--------------------------------------+
| Xcode          | Xcode 26.5                           |
| Android Studio | Android Studio AndroidStudio2025.2.3 |
| Gradle         | Gradle 8.14.5                        |
| Java           | openjdk version "17.0.18" 2026-01-20 |
| CocoaPods      | CocoaPods 1.16.2                     |
+----------------+--------------------------------------+

Which operating systems have you seen this occur on?

macOS

Which platforms were you trying to build for?

iOS (Device)

Notes

Sending a message is the most repeated interaction in a chat app, so losing the keyboard on every send means re-tapping the field each time.

The other way to send is by pressing return, with keep-focus-on-submit - but that only works on a single-line input. In a multi-line composer, return needs to insert a line break, so it can't also be the send key. Right now you have to pick one: line breaks, or a keyboard that stays up.

[gwleuverink]

Thanks for the thorough writeup, reproduced right away.

Confirmed on iOS with your layout. Android doesn't have this one: the same layout there keeps the keyboard up on send, and tapping empty space still dismisses.

While verifying I found the supported shape for exactly this composer: wrap the row in <native:bottom-bar>. It pins above the keyboard natively (no manual bottom padding needed), and a send pressable inside it keeps the keyboard up on iOS too. Just verified that on the simulator. One catch: the screen needs native chrome for the bar to render, a <native:top-bar> or tab bar alongside it.

Your snippet with that applied:

<column class="w-full h-full bg-theme-background">
    <native:top-bar title="Chat" />

    <native:bottom-bar>
        <row class="w-full px-3 py-3 gap-2 items-center bg-theme-surface">
            <bare-text-input
                native:key="message-input"
                native:model="draft"
                placeholder="Type your message..."
                class="flex-1 bg-theme-surface-variant rounded-full px-4 py-3 text-theme-on-surface" />
            <pressable @press="send" class="bg-theme-primary rounded-2xl w-[48] h-[48] items-center justify-center">
                <icon name="paperplane.fill" :size="20" class="text-theme-on-primary" />
            </pressable>
        </row>
    </native:bottom-bar>
</column>

(the pb-8 can go, the bar handles the safe area and keyboard offset itself)

That leaves the in-content behaviour, which I still think should improve. Not settled on the direction yet. Will report back.

[gwleuverink]

Quick follow-up, I mapped the current behaviour on both platforms and it's not symmetrical right now:

• Return key: iOS drops the keyboard, Android keeps it (the docs describe drop as the default, so Android is off-spec here)
• Tapping a button while a field is focused: iOS drops, Android keeps
• Tapping empty space: both drop
• keep-focus-on-submit: works on iOS, silently ignored on Android (the renderer never reads the prop)

I want to make the default symmetric and web-like: the keyboard drops on submit and on any tap outside the field. It's how web devs already think, and it's the right default for regular forms, tapping Submit should close the keyboard there. And then keep-focus-on-submit gets to mean what you assumed it meant when you tried it. With it set, the field keeps focus through the return key and through button sends. Tapping empty space still dismisses either way, same as iMessage and WhatsApp do.

For your composer that means: add keep-focus-on-submit to the input, keep the send pressable, done. The bottom-bar from my earlier comment still works too and stays the nicer layout for chat.

This does mean a behavioral change on Android, which keeps the keyboard on return and on button taps right now. @simonhamp @shanerbaner82

The return-key part is arguably just a bug fix since the docs already describe drop as the default, but the default keyboard behavior when a button is tapped is a real change on android

[gwleuverink]

Fix is up in #353, with the input-renderer half in NativePHP/mobile-ui#53.

The keyboard drops on submit and on any tap outside the field, on both platforms, and keep-focus-on-submit now does what you assumed it did. Tapping the message list still dismisses, same as any chat app.

So your view needs exactly one change: add keep-focus-on-submit to the input. Verified with your exact layout, multiline included, on both platforms. 🚀