Skip to content

Context menu on an editable text field freezes the page after long-press on Android (touch) #12260

Description

@DiegoCardoso

Note

Observed via BrowserStack (real Android devices). Needs confirmation on a physical Android device by someone on the team before treating as authoritative — see "Needs verification" below.

Description

On Android touch, a vaadin-context-menu whose target is an editable text field (vaadin-text-field) leaves the page unresponsive after the following interaction. Once frozen, taps anywhere do nothing (the text field itself is also unresponsive). Reloading the page recovers it.

The freeze is intermittent: a single pass through the steps often does not trigger it. It typically takes several repetitions of the open → dismiss → tap-away → tap-back cycle before the page locks up.

This is not related to autoselect — it reproduces with autoselect off as well.

Steps to reproduce

  1. On an Android device (Chrome), open a page with a vaadin-text-field that has a value, and a vaadin-context-menu targeting it.
  2. Long-press the field so the context menu opens.
  3. Dismiss the menu (tap outside).
  4. Tap another element (e.g. a sibling button).
  5. Tap back on the text field.
  6. Repeat steps 2–5 a few times.

Result: after a few cycles the page stops responding to taps.

Expected outcome

The page remains interactive after dismissing the context menu.

Minimal reproducible example

<vaadin-text-field value="AAA"></vaadin-text-field>
<vaadin-context-menu></vaadin-context-menu>
<button>Sibling</button>
<script type="module">
  const field = document.querySelector('vaadin-text-field');
  const menu = document.querySelector('vaadin-context-menu');
  menu.items = [{ text: 'Item 1' }];
  menu.listenOn = field;
</script>

(Flow equivalent: ContextMenu with setTarget(textField).)

Root cause analysis

The freeze is Android Chrome's native text-selection mode, engaged by the ~500 ms long-press on the target's editable text. The Vaadin overlay opens on top, but the native selection mode is already active and persists after the menu closes, capturing all subsequent touch input. It appears to take a few open/dismiss cycles for the native selection state to get stuck, which is why the freeze is intermittent.

Evidence collected (Pixel-class Android, Chrome, via BrowserStack):

  • When frozen, taps produce zero DOM events even at document capture → the browser is not delivering touches to the page (native-level capture).
  • The DOM is clean: no open overlay, document.body has pointer-events: auto, no inert, no focus trap; JS still runs.
  • window.getSelection().toString() is consistently the field value (e.g. "AAA") in the frozen state — a live native text selection.
  • A context menu on a non-text target (a plain <button> with no selectable text) does not freeze — confirming it is the text selection.

The web layer cannot prevent or recover from it:

Attempt Result
window.getSelection().removeAllRanges() (+ setSelectionRange(0,0), blur) while frozen Selection clears ('') but the page stays frozen — native mode not released
user-select: none / -webkit-user-select: none on the field and its <input> (before the gesture) Ignored for <input> — still freezes
-webkit-touch-callout: none No effect — still freezes
preventDefault() on selectstart (capture, before the gesture) selectstart never fires for this long-press — no hook to intercept — still freezes

The context menu's existing __setListenOnUserSelect(true) (which sets user-select: none and clears the window selection) runs only while the overlay is open and after the selection has already started, so it does not prevent this; and user-select: none has no effect on <input> anyway.

Assessment

This appears to be a native Chrome-on-Android limitation for "long-press context menu on an editable field": the OS text-selection gesture is not interceptable from the web layer (no selectstart, user-select ignored for inputs), and clearing the selection afterward does not release the capture. A fix likely needs a different strategy (e.g. not attaching the long-press context menu directly to an editable element, or a browser-level workaround), which needs investigation.

Needs verification

  • Reproduce on a physical Android device (observed only via BrowserStack so far — BrowserStack does use real devices, but a local physical device should confirm it isn't a remote-session artifact).
  • Confirm across Android Chrome / Edge versions.
  • Confirm whether it also affects other editable targets (e.g. vaadin-text-area, vaadin-combo-box).

Environment

  • Vaadin web components: main (reproduced with no local changes)
  • OS/Browser: Android, Chrome (BrowserStack real devices)

Related

Activity

  1. yuriy-fix commented on Jul 29, 2026

    @yuriy-fix
    Contributor

    @rolfsmeds, could you please try to reproduce it on Android device?

  2. rolfsmeds commented on Jul 30, 2026

    @rolfsmeds
    Contributor

    Tested this on Android Chrome 150.0.7871 (latest).
    I was able to partially reproduce the issue:

    • If the field is double-tapped, the value is selected, preventing the context menu.
    • Sometimes (seemingly at random), the value is selected also on single-tap, which seems like a Chrome bug.

    In both cases, the page remains otherwise completely usable – clicking e.g. the button works, and clicking anywhere at all releases the selection, after which the context menu works again.

    It seems extremely minor at best.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

Type

No type

Projects

No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions