Tappable ripple overlay intercepts pointer events on static-positioned children (e.g. raw `<input>` inside `<Cell>`)

[DMShamonov]

Package/version: @telegram-apps/telegram-ui 2.1.13 (latest), React 19
Platform: base (Android WebView, desktop Chromium)

Description

Tappable renders its ripple as <span> with position: absolute; inset: 0 and no pointer-events: none. The ripple span paints above any static-positioned children, so clicks never reach them: document.activeElement stays BODY, no focus, no native pickers.

The library's own form controls escape the problem only because their wrappers (FormInput label) happen to be positioned. Any raw control placed directly into <Cell> children is dead:

<Cell before={<Icon28CalendarOutline />}>
  <input type="date" />  {/* unreachable: ripple span is the top hit-test target */}
</Cell>

Verified via document.elementsFromPoint(center) — the top element at the input's center is the ripple span (tgui-8071f6e38c77bc0b); a real click sets activeElement to BODY. Found in production: the date field of an order form was completely unusable on Android.

Suggested fix

• pointer-events: none on the ripple span (it is purely decorative), or
• position: relative on the content wrapper inside Tappable/Cell.

Workaround we use

position: relative on the control itself so it paints above the ripple.