Skip to content

fix(guidance): Stop button unresponsive — render() destroys button mid-tap on every GPS fix #179

@jasoneplumb

Description

@jasoneplumb

Symptoms

After v0.31.3-beta, long-press → Navigate works (the geocode-bar Navigate is now tappable, bar hides via #176 fix). But once guidance starts, the Stop button on the guidance pill doesn't respond to taps — "like it's not a button".

Root cause

updateGuidance(e, state, map) is called from location.ts:onLocationFound on every accepted GPS fix (~1 Hz on a moving phone). Its last action is render(), which does:

panelEl.innerHTML = '';
// ...rebuild rows...
appendButton('Stop', ...);  // creates a NEW <button> element

So every second:

  1. The current Stop button is destroyed (innerHTML wipes it).
  2. A fresh <button> element is created with a fresh addEventListener('click', onStop).
  3. The new button is appended to the panel.

iOS Safari's touch-to-click synthesis tracks the DOM element that received touchstart. If the element is destroyed and replaced before touchend, no click is synthesized — the user's tap is silently dropped. Most taps land in the rebuild window because GPS fixes fire faster than typical tap-and-release timing on a moving device.

Fix

Use event delegation: attach a single click listener to the persistent panelEl once at control creation. The listener checks event.target.closest('.guidance-btn') and calls onStop if matched. The listener never re-attaches, so it survives every render. Buttons can come and go without breaking the touch path.

Also add type="button" to the buttons defensively (avoid any implicit form-submit semantics).

Acceptance

  • Long-press → Navigate → guiding state → Stop responds reliably
  • Search → Navigate here → guiding state → Stop responds reliably
  • No regression: routing-state Cancel still works (delegation covers both buttons)

Metadata

Metadata

Assignees

No one assigned

    Labels

    P1Critical — fix immediatelyUXUser experience improvementsbugSomething isn't working

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions